@lifi/widget 0.0.0-preview-6cc63bac

package/src/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
+): any => {
+  const component = theme.components?.[componentName]
+  const property = (component?.styleOverrides as any)?.[styleOverrideProp]
+
+  if (typeof property === 'function') {
+    return property({ theme, ownerState })
+  }
+  return property
+}

package/src/themes/watermelonLight.ts

@@ -0,0 +1,80 @@
+import { tabsClasses } from '@mui/material'
+import type { WidgetTheme } from '../types/widget.js'
+
+export const watermelonLightTheme: WidgetTheme = {
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#f7557c',
+        },
+        secondary: {
+          main: '#00A35A',
+        },
+        background: {
+          default: '#ffeff3',
+          paper: '#ffffff',
+        },
+        text: {
+          primary: '#190006',
+          secondary: '#766066',
+        },
+        grey: {
+          200: '#F0E5E8',
+          300: '#E5D7DA',
+          700: '#7A666B',
+          800: '#58373F',
+        },
+        playground: {
+          main: '#f7557c',
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 16,
+    borderRadiusSecondary: 16,
+    borderRadiusTertiary: 24,
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+  },
+  container: {
+    filter: 'drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.12))',
+    borderRadius: '16px',
+  },
+  components: {
+    MuiCard: {
+      defaultProps: { variant: 'elevation' },
+    },
+    MuiNavigationTabs: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#ffffff',
+            filter: `drop-shadow(0 1px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent))`,
+            borderRadius: '16px',
+          },
+        }),
+      },
+    },
+    // MuiIconButton: {
+    //   styleOverrides: {
+    //     root: ({ theme }) => ({
+    //       backgroundColor: alpha(theme.palette.common.white, 0.04),
+    //       color: 'inherit',
+    //       borderRadius: theme.vars.shape.borderRadiusSecondary,
+    //       '&:hover': {
+    //         backgroundColor: alpha(
+    //           theme.palette.mode === 'light'
+    //             ? theme.palette.common.black
+    //             : theme.palette.common.white,
+    //           0.08,
+    //         ),
+    //         color: 'inherit',
+    //       },
+    //     }),
+    //   },
+    // },
+  },
+} as WidgetTheme

package/src/themes/windows95.ts

@@ -0,0 +1,133 @@
+import { checkboxClasses, tabsClasses } from '@mui/material'
+import type { WidgetTheme } from '../types/widget.js'
+
+export const windows95Theme: WidgetTheme = {
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#0000ff',
+        },
+        secondary: {
+          main: '#f7c303',
+        },
+        text: {
+          primary: '#30313d',
+          secondary: '#6d6e78',
+        },
+        background: {
+          default: '#c0c9d2',
+          paper: '#dfdfdf',
+        },
+        grey: {
+          300: '#bbbbbb',
+        },
+        playground: {
+          main: '#008080',
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 0,
+    borderRadiusSecondary: 0,
+    borderRadiusTertiary: 0,
+  },
+  container: {
+    border: '1px solid #0a0a0a',
+  },
+  navigation: {
+    edge: false,
+  },
+  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: '#cccccc',
+          },
+        },
+      },
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: {
+            borderWidth: 0,
+          },
+        },
+      ],
+    },
+    MuiInputCard: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ffffff',
+          boxShadow:
+            'inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080',
+        },
+      },
+    },
+    MuiNavigationTabs: {
+      styleOverrides: {
+        root: {
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#dfdfdf',
+            boxShadow:
+              'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          },
+        },
+      },
+    },
+    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: '#cccccc',
+          },
+        },
+      },
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: '#0a0a0a',
+          '&:hover': {
+            backgroundColor: 'transparent',
+          },
+          [`&.${checkboxClasses.checked}`]: {
+            color: '#0a0a0a',
+          },
+          [`&.${checkboxClasses.indeterminate}`]: {
+            color: '#0a0a0a',
+          },
+        },
+      },
+    },
+  },
+}

package/src/types/events.ts

@@ -0,0 +1,114 @@
+import type { ChainId, ExecutionAction, Route } from '@lifi/sdk'
+import type { DefaultValues } from '../stores/form/types.js'
+import type { SettingsProps } from '../stores/settings/types.js'
+import type { NavigationRouteType } from '../utils/navigationRoutes.js'
+import type { TokenAmount } from './token.js'
+
+export enum WidgetEvent {
+  AvailableRoutes = 'availableRoutes',
+  ChainPinned = 'chainPinned',
+  ContactSupport = 'contactSupport',
+  DestinationChainTokenSelected = 'destinationChainTokenSelected',
+  FormFieldChanged = 'formFieldChanged',
+  LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
+  PageEntered = 'pageEntered',
+  RouteExecutionCompleted = 'routeExecutionCompleted',
+  RouteExecutionFailed = 'routeExecutionFailed',
+  RouteExecutionStarted = 'routeExecutionStarted',
+  RouteExecutionUpdated = 'routeExecutionUpdated',
+  RouteHighValueLoss = 'routeHighValueLoss',
+  RouteSelected = 'routeSelected',
+  SendToWalletToggled = 'sendToWalletToggled',
+  SettingUpdated = 'settingUpdated',
+  SourceChainTokenSelected = 'sourceChainTokenSelected',
+  TokenSearch = 'tokenSearch',
+  WidgetExpanded = 'widgetExpanded',
+}
+
+export type WidgetEvents = {
+  availableRoutes: (data: Route[]) => void
+  chainPinned: (data: ChainPinned) => void
+  contactSupport: (data: ContactSupport) => void
+  destinationChainTokenSelected: (data: ChainTokenSelected) => void
+  formFieldChanged: (data: FormFieldChanged) => void
+  lowAddressActivityConfirmed: (data: LowAddressActivityConfirmed) => void
+  pageEntered: (data: NavigationRouteType) => void
+  routeExecutionCompleted: (data: Route) => void
+  routeExecutionFailed: (data: RouteExecutionUpdate) => void
+  routeExecutionStarted: (data: Route) => void
+  routeExecutionUpdated: (data: RouteExecutionUpdate) => void
+  routeHighValueLoss: (data: RouteHighValueLossUpdate) => void
+  routeSelected: (data: RouteSelected) => void
+  sendToWalletToggled: (data: boolean) => void
+  settingUpdated: (data: SettingUpdated) => void
+  sourceChainTokenSelected: (data: ChainTokenSelected) => void
+  tokenSearch: (data: TokenSearch) => void
+  widgetExpanded: (data: boolean) => void
+}
+
+// Compile-time invariant: WidgetEvent enum values and keyof WidgetEvents
+// must stay in lockstep. Adding to one without the other fails the build.
+type Exact<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false
+const _eventEnumMatchesEventMap: Exact<`${WidgetEvent}`, keyof WidgetEvents> =
+  true
+void _eventEnumMatchesEventMap
+
+export type ContactSupport = {
+  supportId?: string
+}
+
+export type RouteHighValueLossUpdate = {
+  fromAmountUSD: number
+  toAmountUSD: number
+  gasCostUSD?: number
+  feeCostUSD?: number
+  valueLoss: number
+}
+
+export type RouteExecutionUpdate = {
+  route: Route
+  action: ExecutionAction
+}
+
+export type RouteSelected = {
+  route: Route
+  routes: Route[]
+}
+
+export type TokenSearch = {
+  value: string
+  tokens: TokenAmount[]
+}
+
+export type ChainTokenSelected = {
+  chainId: ChainId
+  tokenAddress: string
+}
+
+export type FormFieldChanged = {
+  [K in keyof DefaultValues]: {
+    fieldName: K
+    newValue: DefaultValues[K]
+    oldValue: DefaultValues[K]
+  }
+}[keyof DefaultValues]
+
+export type SettingUpdated<
+  K extends keyof SettingsProps = keyof SettingsProps,
+> = {
+  setting: K
+  newValue: SettingsProps[K]
+  oldValue: SettingsProps[K]
+  newSettings: SettingsProps
+  oldSettings: SettingsProps
+}
+
+export type ChainPinned = {
+  chainId: number
+  pinned: boolean
+}
+
+export type LowAddressActivityConfirmed = {
+  address: string
+  chainId: number
+}

package/src/types/token.ts

@@ -0,0 +1,21 @@
+import type {
+  TokenAmount as SDKTokenAmount,
+  TokenAmountExtended as SDKTokenAmountExtended,
+  TokenExtended,
+} from '@lifi/sdk'
+
+interface TokenFlags {
+  featured?: boolean
+  popular?: boolean
+  pinned?: boolean
+  verified?: boolean
+}
+
+export interface TokenAmount extends SDKTokenAmount, TokenFlags {}
+
+export interface TokenAmountExtended
+  extends SDKTokenAmountExtended,
+    TokenFlags {}
+
+export type TokenWithVerified = TokenExtended & { verified?: boolean }
+export type TokensByChain = Record<number, TokenWithVerified[]>