feat: add split subvariant (#81)

* feat: split variant draft * feat: update split variant * chore: bump packages
lifinance · May 3, 2023 · 7c65124 · 7c65124
1 parent 5c5b072
commit 7c65124
Show file tree

Hide file tree

Showing 35 changed files with 534 additions and 434 deletions.
diff --git a/package.json b/package.json
@@ -29,12 +29,12 @@
     "@types/big.js": "^6.1.6",
     "@types/eslint": "^8.37.0",
     "@types/events": "^3.0.0",
-    "@types/node": "^18.16.2",
+    "@types/node": "^18.16.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "cpy-cli": "^4.2.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
@@ -46,7 +46,6 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lerna": "^6.6.1",
-    "nx": "^15.9.3",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -28,27 +28,27 @@
     "@lifi/wallet-management": "^2.0.0-beta.4",
     "@lifi/widget": "^2.0.0-beta.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.128",
-    "@mui/material": "^5.12.2",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
     "@opensea/seaport-js": "^1.2.0",
     "@tanstack/react-query": "^4.29.5",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.11.0",
     "web3": "^1.9.0"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "buffer": "^6.0.3",
     "esbuild": "^0.17.18",
-    "rollup": "^3.21.0",
+    "rollup": "^3.21.3",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.3",
+    "vite": "^4.3.4",
     "web-vitals": "^3.3.1"
   },
   "eslintConfig": {

diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json
@@ -27,20 +27,20 @@
     "@lifi/wallet-management": "^2.0.0-beta.4",
     "@lifi/widget": "^2.0.0-beta.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.128",
-    "@mui/material": "^5.12.2",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.10.0"
+    "react-router-dom": "^6.11.0"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.3",
+    "vite": "^4.3.4",
     "web-vitals": "^3.3.1"
   },
   "eslintConfig": {

diff --git a/packages/widget-playground/src/App.tsx b/packages/widget-playground/src/App.tsx
@@ -1,5 +1,5 @@
 import type { StaticToken } from '@lifi/sdk';
-import type { WidgetVariant } from '@lifi/widget';
+import type { WidgetSubvariant, WidgetVariant } from '@lifi/widget';
 import { LiFiWidget } from '@lifi/widget';
 import {
   Box,
@@ -25,6 +25,7 @@ import { WalletButtons } from './components/WalletButtons';
 import { WidgetEvents } from './components/WidgetEvents';
 import {
   METAMASK_WALLET,
+  WidgetSubvariants,
   WidgetVariants,
   widgetBaseConfig,
   widgetConfig,
@@ -44,6 +45,7 @@ export const App = () => {
   const [variant, setVariant] = useState<WidgetVariant>(
     searchParams.drawer ? 'drawer' : 'expandable',
   );
+  const [subvariant, setSubvariant] = useState<WidgetSubvariant>('default');
   const [fontFamily, setFontFamily] = useState('Inter var, Inter, sans-serif');
   const [borderRadius, setBorderRadius] = useState(12);
   const [borderRadiusSecondary, setBorderRadiusSecondary] = useState(8);
@@ -106,6 +108,7 @@ export const App = () => {
         components: widgetConfig.theme?.components,
       },
       variant,
+      subvariant,
     }));
   }, [
     borderRadius,
@@ -115,6 +118,7 @@ export const App = () => {
     prefersDarkMode,
     primary,
     secondary,
+    subvariant,
     systemColor,
     variant,
   ]);
@@ -220,6 +224,24 @@ export const App = () => {
                 </Select>
               </FormControl>
             </Box>
+            <Box pb={2} flex={1}>
+              <FormControl size="small" fullWidth>
+                <InputLabel>Widget subvariant</InputLabel>
+                <Select
+                  value={subvariant}
+                  label="Widget subvariant"
+                  onChange={(event) =>
+                    setSubvariant(event.target.value as WidgetSubvariant)
+                  }
+                >
+                  {WidgetSubvariants.map((variant) => (
+                    <MenuItem key={variant} value={variant}>
+                      {variant}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Box>
 
             <Box px={1} flex={1}>
               <FormControlLabel

diff --git a/packages/widget-playground/src/config.ts b/packages/widget-playground/src/config.ts
@@ -13,6 +13,8 @@ export const WidgetVariants = [
   'refuel',
 ] as const;
 
+export const WidgetSubvariants = ['default', 'split'] as const;
+
 export const widgetBaseConfig: WidgetConfig = {
   // fromChain: 137,
   // toChain: 10,
@@ -22,8 +24,9 @@ export const widgetBaseConfig: WidgetConfig = {
   // toAddress: '0x552008c0f6870c2f77e5cC1d2eb9bdff03e30Ea0',
 
   variant: 'expandable',
+  // subvariant: 'split',
   integrator: 'li.fi-playground',
-  // hiddenUI: ['poweredBy', 'language', 'appearance'],
+  // hiddenUI: ['poweredBy', 'language', 'appearance', 'drawerButton'],
   chains: {
     allow: [], // 1, 1285, 10, 56, 137
     deny: [],

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -56,8 +56,8 @@
     "@lifi/sdk": "^2.0.0-beta.11",
     "@lifi/wallet-management": "^2.0.0-beta.4",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.128",
-    "@mui/material": "^5.12.2",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
@@ -70,7 +70,7 @@
     "react-hook-form": "^7.43.9",
     "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.11.0",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
     "zustand": "^4.3.7"

diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -14,6 +14,7 @@ import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 import type { WidgetConfig, WidgetProps } from './types';
+import { HiddenUI } from './types';
 
 export interface WidgetDrawer {
   isOpen(): void;
@@ -64,15 +65,21 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
 
     return (
       <AppProvider config={widgetConfig}>
-        <DrawerButton
-          variant="contained"
-          onClick={toggleDrawer}
-          open={drawerOpen}
-          drawerProps={config?.containerStyle}
-        >
-          {drawerOpen ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
-          <DrawerButtonText open={drawerOpen} />
-        </DrawerButton>
+        {!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (
+          <DrawerButton
+            variant="contained"
+            onClick={toggleDrawer}
+            open={drawerOpen}
+            drawerProps={config?.containerStyle}
+          >
+            {drawerOpen ? (
+              <KeyboardArrowRightIcon />
+            ) : (
+              <KeyboardArrowLeftIcon />
+            )}
+            <DrawerButtonText open={drawerOpen} />
+          </DrawerButton>
+        ) : null}
         <Drawer
           ref={elementRef}
           anchor="right"

diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -22,7 +22,7 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
 }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <StoreProvider namePrefix={config?.localStorageKeyPrefix}>
+      <StoreProvider config={config}>
         <WidgetProvider config={config}>
           <SDKProvider>
             <ThemeProvider>

diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts
@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
 import { useController, useFormContext } from 'react-hook-form';
-import { useChains } from '../../hooks';
+import { useChains, useSwapOnly } from '../../hooks';
 import type { SwapFormType } from '../../providers';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores';
@@ -13,6 +13,7 @@ export const useChainSelect = (formType: SwapFormType) => {
   const { setValue } = useFormContext();
   const { chains, isLoading } = useChains();
   const [chainOrder, setChainOrder] = useChainOrder();
+  const swapOnly = useSwapOnly();
 
   const getChains = () => {
     if (!chains) {
@@ -28,6 +29,11 @@ export const useChainSelect = (formType: SwapFormType) => {
   const setCurrentChain = (chainId: number) => {
     onChange(chainId);
     onBlur();
+    if (swapOnly) {
+      setValue(SwapFormKeyHelper.getChainKey('to'), chainId, {
+        shouldTouch: true,
+      });
+    }
     setValue(SwapFormKeyHelper.getTokenKey(formType), '');
     setValue(SwapFormKeyHelper.getAmountKey(formType), '');
     setValue(SwapFormKey.TokenSearchFilter, '');

diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
@@ -43,4 +43,7 @@ export const WalletButton = styled(Button)(({ theme }) => ({
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
     fontSize: '24px',
   },
+  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
 }));
diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx
@@ -2,7 +2,7 @@ import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { createElementId, ElementId, stickyHeaderRoutes } from '../../utils';
+import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
@@ -21,10 +21,10 @@ export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
 };
 
 export const Header: FC = () => {
-  const { walletManagement } = useWidgetConfig();
+  const { walletManagement, subvariant } = useWidgetConfig();
   return (
     <HeaderContainer>
-      {!walletManagement ? <WalletHeader /> : null}
+      {!walletManagement && subvariant !== 'split' ? <WalletHeader /> : null}
       <NavigationHeader />
     </HeaderContainer>
   );