@lifi/widget 3.0.0-alpha.33 → 3.0.0-alpha.35

package/themes/createTheme.ts

@@ -0,0 +1,416 @@
+import { loadingButtonClasses } from '@mui/lab';
+import type {} from '@mui/lab/themeAugmentation';
+import type {
+  CSSObject,
+  PaletteMode,
+  Shape,
+  SimplePaletteColorOptions,
+} from '@mui/material';
+import {
+  alpha,
+  createTheme as createMuiTheme,
+  css,
+  darken,
+  dialogActionsClasses,
+  getContrastRatio,
+  keyframes,
+  lighten,
+  touchRippleClasses,
+} from '@mui/material';
+import type { WidgetTheme } from '../types/widget.js';
+import type {} from './types.js';
+import { getStyleOverrides } from './utils.js';
+
+const palette = {
+  primary: {
+    main: '#5C67FF',
+    light: lighten('#5C67FF', 0.84),
+    dark: darken('#5C67FF', 0.2),
+  },
+  secondary: {
+    main: '#F5B5FF',
+    light: lighten('#F5B5FF', 0.84),
+    dark: darken('#F5B5FF', 0.2),
+  },
+  success: {
+    main: '#0AA65B',
+  },
+  warning: {
+    main: '#FFCC00',
+  },
+  error: {
+    main: '#E5452F',
+  },
+  info: {
+    main: '#297EFF',
+  },
+  common: {
+    black: '#000',
+    white: '#fff',
+  },
+};
+
+const paletteLight = {
+  background: {
+    // default: '#c0c9d2',
+    // paper: '#dfdfdf',
+  },
+  text: {
+    primary: '#000000',
+    secondary: '#747474',
+  },
+};
+
+const paletteDark = {
+  background: {
+    paper: '#212121',
+  },
+};
+
+const shape: Shape = {
+  borderRadius: 12,
+  borderRadiusSecondary: 12,
+  borderRadiusTertiary: 24,
+};
+
+const enterKeyframe = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
+
+export const createTheme = (
+  mode: PaletteMode,
+  widgetTheme: WidgetTheme = {},
+) => {
+  const primaryMainColor =
+    (widgetTheme.palette?.primary as SimplePaletteColorOptions)?.main ??
+    palette.primary.main;
+  const primaryLightColor = lighten(primaryMainColor, 0.84);
+  const primaryDarkColor = darken(primaryMainColor, 0.2);
+  const secondaryMainColor =
+    (widgetTheme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+    palette.secondary.main;
+  const contrastButtonColor =
+    getContrastRatio(palette.common.white, primaryMainColor) >= 3
+      ? palette.common.white
+      : palette.common.black;
+  const contrastTextButtonColor =
+    getContrastRatio(palette.common.white, alpha(primaryMainColor, 0.08)) >= 3
+      ? palette.common.white
+      : palette.common.black;
+  const borderRadiusSecondary =
+    widgetTheme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary;
+
+  return createMuiTheme({
+    container: widgetTheme.container,
+    navigation: {
+      edge: true,
+      dense: true,
+      ...widgetTheme.navigation,
+    },
+    typography: {
+      fontFamily: 'Inter var, Inter, sans-serif',
+      ...widgetTheme.typography,
+    },
+    palette: {
+      mode,
+      ...palette,
+      ...(mode === 'light' ? paletteLight : paletteDark),
+      ...widgetTheme.palette,
+      primary: {
+        main: primaryMainColor,
+        light: primaryLightColor,
+        dark: primaryDarkColor,
+      },
+      secondary: {
+        main: secondaryMainColor,
+        light: lighten(secondaryMainColor, 0.84),
+        dark: darken(secondaryMainColor, 0.2),
+      },
+    },
+    shape: {
+      ...shape,
+      ...widgetTheme.shape,
+    },
+    breakpoints: {
+      values: {
+        xs: 360,
+        sm: 416,
+        md: 900,
+        lg: 1200,
+        xl: 1536,
+      },
+    },
+    components: {
+      MuiScopedCssBaseline: {
+        styleOverrides: {
+          root: {
+            fontFamily: 'Inter, sans-serif',
+            ...widgetTheme.typography,
+            '@supports (font-variation-settings: normal)': {
+              fontFamily: 'Inter var, sans-serif',
+              ...widgetTheme.typography,
+            },
+          },
+        },
+      },
+      MuiAppBar: {
+        styleOverrides: {
+          root: ({ ownerState, theme }) => ({
+            minHeight: 40,
+            padding: 0,
+            ...getStyleOverrides('MuiAppBar', 'root', widgetTheme, ownerState),
+          }),
+        },
+      },
+      MuiCard: {
+        defaultProps: {
+          variant: 'outlined',
+          ...widgetTheme.components?.MuiCard?.defaultProps,
+        },
+        styleOverrides: {
+          root: ({ ownerState, theme }) => {
+            const root = widgetTheme.components?.MuiCard?.styleOverrides
+              ?.root as CSSObject;
+            const rootHover = root?.['&:hover'];
+            return {
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: theme.shape.borderRadius,
+              overflow: 'hidden',
+              position: 'relative',
+              boxSizing: 'border-box',
+              transition: theme.transitions.create(
+                ['background-color', 'filter'],
+                {
+                  duration: theme.transitions.duration.enteringScreen,
+                  easing: theme.transitions.easing.easeOut,
+                },
+              ),
+              ...(!!ownerState.onClick && {
+                '&:hover': {
+                  cursor: 'pointer',
+                },
+              }),
+              ...(!!ownerState.onClick &&
+                (ownerState.variant === 'outlined' ||
+                  ownerState.variant === 'filled') && {
+                  '&:hover': {
+                    cursor: 'pointer',
+                    backgroundColor:
+                      theme.palette.mode === 'light'
+                        ? darken(theme.palette.background.paper, 0.02)
+                        : lighten(theme.palette.background.paper, 0.02),
+                  },
+                }),
+              ...(!!ownerState.onClick &&
+                ownerState.variant === 'elevation' && {
+                  '&:hover': {
+                    cursor: 'pointer',
+                    filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.08)})`,
+                  },
+                }),
+              ...(typeof root === 'object' && root),
+              ...(!!ownerState.onClick &&
+                !!rootHover && {
+                  '&:hover': {
+                    ...rootHover,
+                  },
+                }),
+              ...(!ownerState.onClick && {
+                '&:hover': {},
+              }),
+            };
+          },
+        },
+        variants: widgetTheme.components?.MuiCard?.variants ?? [
+          {
+            props: { variant: 'outlined' },
+            style: ({ theme }) => ({
+              borderWidth: 1,
+              borderStyle: 'solid',
+              borderColor:
+                theme.palette.mode === 'light'
+                  ? theme.palette.grey[300]
+                  : theme.palette.grey[800],
+            }),
+          },
+          {
+            props: { variant: 'elevation' },
+            style: ({ theme }) => ({
+              border: 'none',
+              boxShadow: 'none',
+              filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.04)})`,
+            }),
+          },
+          {
+            props: { variant: 'filled' },
+            style: {
+              border: 'none',
+            },
+          },
+        ],
+      },
+      MuiInputCard: {
+        ...widgetTheme.components?.MuiInputCard,
+      },
+      MuiButtonBase: {
+        styleOverrides: {
+          // This `css()` function invokes keyframes. `styled-components` only supports keyframes
+          // in string templates. Do not convert these styles in JS object as it will break.
+          root: css`
+            &
+              .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {
+              opacity: 0.1;
+              animation-name: ${enterKeyframe};
+            }
+          `,
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true,
+          ...widgetTheme.components?.MuiButton?.defaultProps,
+        },
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            borderRadius: borderRadiusSecondary,
+            textTransform: 'none',
+            fontSize: 16,
+            fontWeight: 600,
+            [`&.Mui-disabled, &.Mui-disabled:hover`]: {
+              color: alpha(
+                mode === 'light' ? palette.common.black : palette.common.white,
+                0.56,
+              ),
+              cursor: 'not-allowed',
+              pointerEvents: 'auto',
+            },
+            [`&.${loadingButtonClasses.loading}.Mui-disabled`]: {
+              backgroundColor: primaryMainColor,
+              color: contrastButtonColor,
+              cursor: 'auto',
+              pointerEvents: 'auto',
+            },
+            [`.${loadingButtonClasses.loadingIndicator}`]: {
+              color: contrastButtonColor,
+            },
+            [`&.${loadingButtonClasses.root}.${loadingButtonClasses.loading}`]:
+              {
+                color: 'transparent',
+              },
+            ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
+          }),
+          text: ({ theme, ownerState }) => ({
+            backgroundColor:
+              mode === 'light'
+                ? alpha(primaryMainColor, 0.08)
+                : alpha(primaryMainColor, 0.42),
+            '&:hover': {
+              backgroundColor:
+                mode === 'light'
+                  ? alpha(primaryMainColor, 0.12)
+                  : alpha(primaryMainColor, 0.56),
+            },
+            color:
+              mode === 'light' ? primaryMainColor : contrastTextButtonColor,
+            ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
+          }),
+          contained: ({ theme, ownerState }) => ({
+            '&:hover': {
+              color: contrastButtonColor,
+            },
+            ...getStyleOverrides(
+              'MuiButton',
+              'contained',
+              widgetTheme,
+              ownerState,
+            ),
+          }),
+          sizeMedium: ({ theme, ownerState }) => ({
+            padding: '10px 14px',
+            [`.${dialogActionsClasses.root} &`]: {
+              padding: '6px 12px',
+            },
+            ...getStyleOverrides(
+              'MuiButton',
+              'sizeMedium',
+              widgetTheme,
+              ownerState,
+            ),
+          }),
+        },
+      },
+      MuiIconButton: {
+        ...widgetTheme.components?.MuiIconButton,
+        styleOverrides: {
+          ...widgetTheme.components?.MuiIconButton?.styleOverrides,
+          root: ({ theme, ownerState }) => ({
+            color: 'inherit',
+            '&:hover': {
+              color: 'inherit',
+            },
+            ...getStyleOverrides(
+              'MuiIconButton',
+              'root',
+              widgetTheme,
+              ownerState,
+            ),
+          }),
+        },
+      },
+      MuiAvatar: {
+        styleOverrides: {
+          root: {
+            height: 40,
+            width: 40,
+          },
+          img: {
+            objectFit: 'contain',
+          },
+        },
+        ...widgetTheme.components?.MuiAvatar,
+      },
+      MuiListItemText: {
+        styleOverrides: {
+          primary: ({ theme }) => ({
+            fontWeight: 600,
+            fontSize: '1.125rem',
+            lineHeight: '1.2778',
+            color: theme.palette.text.primary,
+          }),
+          secondary: ({ theme }) => ({
+            fontWeight: 500,
+            fontSize: '0.75rem',
+            color: theme.palette.text.secondary,
+          }),
+        },
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: ({ theme }) => ({
+            backgroundColor: 'rgb(0 0 0 / 64%)',
+            backdropFilter: 'blur(3px)',
+            fontSize: '0.75rem',
+            padding: theme.spacing(1, 1.5),
+          }),
+          arrow: {
+            color: 'rgb(0 0 0 / 64%)',
+          },
+        },
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            backgroundColor: theme.palette.background.default,
+          }),
+        },
+      },
+    },
+  });
+};

package/themes/jumper.ts

@@ -0,0 +1,37 @@
+import type { WidgetTheme } from '../types/widget.js';
+
+export const jumperTheme: WidgetTheme = {
+  palette: {},
+  // shape: {
+  //   borderRadius: 0,
+  //   borderRadiusSecondary: 0,
+  //   borderRadiusTertiary: 0,
+  // },
+  container: {},
+  playground: {},
+  components: {
+    MuiIconButton: {
+      styleOverrides: {
+        // root: ({ theme }) => ({
+        //   backgroundColor: alpha(
+        //     theme.palette.mode === 'light'
+        //       ? theme.palette.common.black
+        //       : theme.palette.common.white,
+        //     0.04,
+        //   ),
+        //   color: 'inherit',
+        //   borderRadius: theme.shape.borderRadiusSecondary,
+        //   '&:hover': {
+        //     backgroundColor: alpha(
+        //       theme.palette.mode === 'light'
+        //         ? theme.palette.common.black
+        //         : theme.palette.common.white,
+        //       0.08,
+        //     ),
+        //     color: 'inherit',
+        //   },
+        // }),
+      },
+    },
+  },
+};

package/themes/types.ts

@@ -0,0 +1,63 @@
+import type {} from '@mui/lab/themeAugmentation';
+import type {
+  CardProps,
+  ComponentsOverrides,
+  ComponentsVariants,
+} from '@mui/material';
+import type { CSSProperties } from 'react';
+import type { NavigationProps } from '../types/widget.js';
+
+// @mui/icons-material ESM issue
+// https://github.com/mui/material-ui/issues/30671
+
+// https://mui.com/customization/palette/
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    '@supports (font-variation-settings: normal)': React.CSSProperties;
+  }
+  interface TypographyVariantsOptions {
+    '@supports (font-variation-settings: normal)'?: React.CSSProperties;
+  }
+  interface Shape {
+    borderRadius: number;
+    borderRadiusSecondary: number;
+    borderRadiusTertiary: number;
+  }
+  interface Theme {
+    shape: Shape;
+    container: CSSProperties;
+    navigation: NavigationProps;
+  }
+  interface ThemeOptions {
+    shape?: Partial<Shape>;
+    container?: CSSProperties;
+    navigation?: NavigationProps;
+  }
+  interface ComponentNameToClassKey {
+    MuiInputCard: 'root';
+  }
+  interface ComponentsPropsList {
+    MuiInputCard: Partial<CardProps>;
+  }
+  interface Components {
+    MuiInputCard?: {
+      defaultProps?: ComponentsPropsList['MuiInputCard'];
+      styleOverrides?: ComponentsOverrides<
+        Omit<Theme, 'components'>
+      >['MuiInputCard'];
+      variants?: ComponentsVariants['MuiInputCard'];
+    };
+  }
+}
+
+declare module '@mui/material/Paper' {
+  interface PaperPropsVariantOverrides {
+    filled: true;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    '@supports (font-variation-settings: normal)': true;
+  }
+}

package/themes/utils.ts

@@ -0,0 +1,18 @@
+import type { WidgetTheme, WidgetThemeComponents } from '../types/widget.js';
+
+type ComponentName = keyof WidgetThemeComponents;
+
+export const getStyleOverrides = (
+  componentName: ComponentName,
+  styleOverrideProp: string,
+  theme: WidgetTheme,
+  ownerState?: any,
+) => {
+  const component = theme.components?.[componentName];
+  const property = (component?.styleOverrides as any)?.[styleOverrideProp];
+
+  if (typeof property === 'function') {
+    return property({ theme, ownerState });
+  }
+  return property;
+};

package/themes/windows95.ts

@@ -0,0 +1,98 @@
+import type { WidgetTheme } from '../types/widget.js';
+
+export const windows95Theme: WidgetTheme = {
+  palette: {
+    primary: {
+      main: '#0000ff',
+    },
+    secondary: {
+      main: '#f7c303',
+    },
+    text: {
+      primary: '#30313d',
+      secondary: '#6d6e78',
+    },
+    background: {
+      default: '#c0c9d2',
+      paper: '#dfdfdf',
+    },
+    grey: {
+      300: '#bbb',
+    },
+  },
+  shape: {
+    borderRadius: 0,
+    borderRadiusSecondary: 0,
+    borderRadiusTertiary: 0,
+  },
+  container: {
+    border: '1px solid #0a0a0a',
+  },
+  playground: {
+    background: '#008080',
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          '&:hover': {
+            boxShadow:
+              'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      defaultProps: {
+        variant: 'outlined',
+      },
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          borderWidth: 0,
+          '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: '#ccc',
+          },
+        },
+      },
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: {
+            borderWidth: 0,
+          },
+        },
+      ],
+    },
+    MuiInputCard: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#fff',
+          boxShadow:
+            'inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080',
+        },
+      },
+    },
+    MuiIconButton: {
+      defaultProps: {
+        // disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          boxShadow:
+            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          backgroundColor: '#dfdfdf',
+          '&:hover': {
+            color: 'inherit',
+            backgroundColor: '#ccc',
+          },
+        },
+      },
+    },
+  },
+};

package/types/events.ts

@@ -12,6 +12,7 @@ export enum WidgetEvent {
   SendToWalletToggled = 'sendToWalletToggled',
   ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
   WalletConnected = 'walletConnected',
+  WidgetExpanded = 'widgetExpanded',
 }
 
 export type WidgetEvents = {
@@ -26,6 +27,7 @@ export type WidgetEvents = {
   sendToWalletToggled: boolean;
   reviewTransactionPageEntered?: Route;
   walletConnected: WalletConnected;
+  widgetExpanded: boolean;
 };
 
 export interface ContactSupport {