@lifi/widget 3.0.0-alpha.37 → 3.0.0-alpha.38

package/pages/TransactionPage/TransactionPage.tsx

@@ -15,7 +15,7 @@ import { useRouteExecution } from '../../hooks/useRouteExecution.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { WidgetEvent } from '../../types/events.js';
 import { formatTokenAmount } from '../../utils/format.js';
@@ -40,7 +40,6 @@ export const TransactionPage: React.FC = () => {
   const { subvariant, insurance, contractSecondaryComponent } =
     useWidgetConfig();
   const { state }: any = useLocation();
-  const headerStoreContext = useHeaderStoreContext();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
 
@@ -60,19 +59,26 @@ export const TransactionPage: React.FC = () => {
       onAcceptExchangeRateUpdate,
     });
 
-  useEffect(() => {
-    if (route && subvariant !== 'custom') {
-      const transactionType =
-        route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-      return headerStoreContext
-        .getState()
-        .setTitle(
-          status === RouteExecutionStatus.Idle
-            ? t(`button.review${transactionType}`)
-            : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`),
-        );
+  const getHeaderTitle = () => {
+    if (subvariant === 'custom') {
+      return t(`header.purchase`);
+    } else {
+      if (route) {
+        const transactionType =
+          route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+
+        return status === RouteExecutionStatus.Idle
+          ? t(`button.review${transactionType}`)
+          : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`);
+      }
     }
-  }, [headerStoreContext, route, status, subvariant, t]);
+
+    return t(`header.exchange`);
+  };
+
+  const title = getHeaderTitle();
+
+  useHeader(title);
 
   useEffect(() => {
     if (status === RouteExecutionStatus.Idle) {

package/stores/header/useHeaderStore.tsx

@@ -34,7 +34,6 @@ export function useHeaderStore<T>(selector: (state: HeaderState) => T): T {
   const useStore = useHeaderStoreContext();
   return useStore(selector);
 }
-
 export const createHeaderStore = ({ namePrefix }: PersistStoreProps) =>
   createWithEqualityFn<HeaderState>(
     (set, get) => ({

package/themes/azureLight.ts

@@ -1,3 +1,4 @@
+import { tabsClasses } from '@mui/material';
 import type { WidgetTheme } from '../types/widget.js';
 
 export const azureLightTheme: WidgetTheme = {
@@ -42,5 +43,16 @@ export const azureLightTheme: WidgetTheme = {
     MuiCard: {
       defaultProps: { variant: 'filled' },
     },
+    // Used only for 'split' subvariant and can be safely removed if not used
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#f8f8fa',
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#ffffff',
+          },
+        },
+      },
+    },
   },
 };

package/themes/createTheme.ts

@@ -15,12 +15,13 @@ import {
   getContrastRatio,
   keyframes,
   lighten,
+  tabsClasses,
   touchRippleClasses,
 } from '@mui/material';
 import type { WidgetTheme } from '../types/widget.js';
+import { palette, paletteDark, paletteLight } from './palettes.js';
 import type {} from './types.js';
 import { getStyleOverrides } from './utils.js';
-import { palette, paletteLight, paletteDark } from './palettes.js';
 
 const shape: Shape = {
   borderRadius: 12,
@@ -365,6 +366,40 @@ export const createTheme = (
           }),
         },
       },
+      MuiTabs: {
+        ...widgetTheme.components?.MuiTabs,
+        styleOverrides: {
+          ...widgetTheme.components?.MuiTabs?.styleOverrides,
+          root: ({ theme, ownerState }) => {
+            const rootStyleOverrides = getStyleOverrides(
+              'MuiTabs',
+              'root',
+              widgetTheme,
+              ownerState,
+            );
+            return {
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette.common.black, 0.04)
+                  : alpha(theme.palette.common.white, 0.08),
+              borderRadius: theme.shape.borderRadius,
+              ...rootStyleOverrides,
+              [`.${tabsClasses.indicator}`]: {
+                backgroundColor:
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : alpha(theme.palette.common.black, 0.56),
+                borderRadius:
+                  theme.shape.borderRadius > 0
+                    ? theme.shape.borderRadius - 4
+                    : theme.shape.borderRadius,
+                boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+                ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
+              },
+            };
+          },
+        },
+      },
     },
   });
 };

package/themes/watermelonLight.ts

@@ -1,6 +1,4 @@
 import type { WidgetTheme } from '../types/widget.js';
-import { alpha } from '@mui/material';
-import { palette } from '@lifi/widget';
 
 export const watermelonLightTheme: WidgetTheme = {
   palette: {

package/types/widget.ts

@@ -51,6 +51,7 @@ export type WidgetThemeComponents = Pick<
   | 'MuiCard'
   | 'MuiIconButton'
   | 'MuiInputCard'
+  | 'MuiTabs'
 >;
 export type WidgetTheme = {
   palette?: Pick<

package/utils/colors.ts

@@ -16,11 +16,6 @@ export const getInfoBackgroundColor = (theme: Theme) =>
     ? alpha(theme.palette.info.main, 0.12)
     : alpha(theme.palette.info.main, 0.16);
 
-export const getCardFieldsetBackgroundColor = (theme: Theme) =>
-  theme.palette.mode === 'light'
-    ? alpha(theme.palette.common.black, 0.04)
-    : theme.palette.grey[800];
-
 /**
  * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
  * Blend a transparent overlay color with a background color, resulting in a single