@huma-finance/widgets 0.0.7 → 0.0.10

package/src/store/widgets.reducers.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { ApproveInfo } from '@huma-finance/shared'
+import { Approval } from '@huma-finance/shared'
 
 import {
   initialWidgetState,
@@ -16,7 +16,7 @@ export const widgetSlice = createSlice({
       state.errorReason = ''
       state.errorMessage = ''
       state.step = undefined
-      state.approveInfo = undefined
+      state.approval = undefined
       state.borrowAmount = undefined
       state.borrowAmountBN = undefined
       state.chargedFees = undefined
@@ -33,12 +33,12 @@ export const widgetSlice = createSlice({
     setStep: (state, { payload }: PayloadAction<WIDGET_STEP>) => {
       state.step = payload
     },
-    setApproveInfo: (
+    setApproval: (
       state,
-      { payload }: PayloadAction<ApproveInfo & { nextStep: WIDGET_STEP }>,
+      { payload }: PayloadAction<Approval & { nextStep: WIDGET_STEP }>,
     ) => {
-      state.approveInfo = payload
-      if (Number(payload.creditLimit) > 0) {
+      state.approval = payload
+      if (Number(payload.terms.creditLimit) > 0) {
         state.step = payload.nextStep
       } else {
         state.errorMessage =
@@ -106,7 +106,7 @@ export const widgetSlice = createSlice({
 export const {
   resetState,
   setStep,
-  setApproveInfo,
+  setApproval,
   setBorrowInfo,
   setError,
   setTokenId,

package/src/store/widgets.selectors.ts

@@ -1,3 +1,3 @@
-import { RootState } from '.'
-
-export const selectWidgetState = (state: RootState) => state.widget
+import { RootState } from '.'
+
+export const selectWidgetState = (state: RootState) => state.widget

package/src/store/widgets.store.ts

@@ -1,4 +1,4 @@
-import { ApproveInfo } from '@huma-finance/shared'
+import { Approval } from '@huma-finance/shared'
 
 export enum WIDGET_TYPE {
   BORROW = 'BORROW',
@@ -35,7 +35,7 @@ export type MultisendPayload = {
 export type WidgetState = {
   step?: WIDGET_STEP
   type?: WIDGET_TYPE
-  approveInfo?: ApproveInfo
+  approval?: Approval
   borrowAmount?: number
   borrowAmountBN?: string
   chargedFees?: number

package/src/theme/breakpoints.ts

@@ -1,10 +1,10 @@
-import { Breakpoints } from '@mui/system'
-
-export const breakpoints: Partial<
-  {
-    step: number
-    unit: string
-  } & Breakpoints
-> = {
-  values: { xs: 460, sm: 600, md: 960, lg: 1280, xl: 1920 },
-}
+import { Breakpoints } from '@mui/system'
+
+export const breakpoints: Partial<
+  {
+    step: number
+    unit: string
+  } & Breakpoints
+> = {
+  values: { xs: 460, sm: 600, md: 960, lg: 1280, xl: 1920 },
+}

package/src/theme/components.ts

@@ -1,70 +1,70 @@
-/**
- * This file can be used to override default props and styles on the various Material components
- * see: https://mui.com/customization/theme-components/
- */
-import { Theme, ThemeOptions } from '@mui/material'
-
-export function components(theme: Theme): ThemeOptions['components'] {
-  return {
-    MuiButton: {
-      defaultProps: {
-        disableElevation: true,
-      },
-      styleOverrides: {
-        contained: {
-          // align outlined vs contained borders
-          border: '1px solid transparent',
-          background:
-            'linear-gradient(232.71deg, #A363F4 4.17%, #FF6A8A 178.69%)',
-        },
-        outlined: {
-          '.MuiBox-root': {
-            background:
-              'linear-gradient(232.71deg, #A363F4 4.17%, #FF6A8A 178.69%)',
-            backgroundClip: 'text',
-            textFillColor: 'transparent',
-          },
-        },
-        root: {
-          fontFamily: 'Uni-Neue-Bold',
-          fontSize: '15px',
-          borderRadius: '32px',
-          '&.MuiButton-containedPrimary': {
-            '&:hover': {
-              backgroundColor: theme.palette.primary.main,
-            },
-            boxShadow:
-              '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
-          },
-          '&.MuiButton-outlinedPrimary': {
-            '&:hover': {
-              backgroundColor: theme.palette.common.white,
-            },
-          },
-          textTransform: 'none',
-          '&:disabled': {
-            border: 'none',
-            background: 'rgba(0, 0, 0, 0.12)',
-            boxShadow: 'unset',
-          },
-        },
-      },
-    },
-    MuiButtonBase: {
-      defaultProps: {},
-    },
-    MuiCssBaseline: {
-      styleOverrides: {
-        dd: {
-          margin: 0,
-        },
-        dl: {
-          margin: 0,
-        },
-        dt: {
-          margin: 0,
-        },
-      },
-    },
-  }
-}
+/**
+ * This file can be used to override default props and styles on the various Material components
+ * see: https://mui.com/customization/theme-components/
+ */
+import { Theme, ThemeOptions } from '@mui/material'
+
+export function components(theme: Theme): ThemeOptions['components'] {
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        contained: {
+          // align outlined vs contained borders
+          border: '1px solid transparent',
+          background:
+            'linear-gradient(232.71deg, #A363F4 4.17%, #FF6A8A 178.69%)',
+        },
+        outlined: {
+          '.MuiBox-root': {
+            background:
+              'linear-gradient(232.71deg, #A363F4 4.17%, #FF6A8A 178.69%)',
+            backgroundClip: 'text',
+            textFillColor: 'transparent',
+          },
+        },
+        root: {
+          fontFamily: 'Uni-Neue-Bold',
+          fontSize: '15px',
+          borderRadius: '32px',
+          '&.MuiButton-containedPrimary': {
+            '&:hover': {
+              backgroundColor: theme.palette.primary.main,
+            },
+            boxShadow:
+              '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
+          },
+          '&.MuiButton-outlinedPrimary': {
+            '&:hover': {
+              backgroundColor: theme.palette.common.white,
+            },
+          },
+          textTransform: 'none',
+          '&.Mui-disabled': {
+            border: 'none',
+            background: 'rgba(0, 0, 0, 0.12)',
+            boxShadow: 'unset',
+          },
+        },
+      },
+    },
+    MuiButtonBase: {
+      defaultProps: {},
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        dd: {
+          margin: 0,
+        },
+        dl: {
+          margin: 0,
+        },
+        dt: {
+          margin: 0,
+        },
+      },
+    },
+  }
+}

package/src/theme/coreThemeConstants.ts

@@ -1,29 +1,29 @@
-export const coreThemeConstants = {
-  borderRadius: {
-    md: 4,
-  },
-  fontFamily: [
-    'Roboto',
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(','),
-  letterSpacing: {
-    lg: '2px',
-    md: '1px',
-    sm: '0.45px',
-    xs: '0.25px',
-  },
-  lineHeight: {
-    lg: 1.4, // 22.4px on 16
-    md: 1.1875, // 19px on 16, 47.5 on 40
-    xl: 1.5, // 24px on 16
-  },
-  spacingBase: 8, // 8px grid
-}
+export const coreThemeConstants = {
+  borderRadius: {
+    md: 4,
+  },
+  fontFamily: [
+    'Roboto',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Segoe UI"',
+    '"Helvetica Neue"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(','),
+  letterSpacing: {
+    lg: '2px',
+    md: '1px',
+    sm: '0.45px',
+    xs: '0.25px',
+  },
+  lineHeight: {
+    lg: 1.4, // 22.4px on 16
+    md: 1.1875, // 19px on 16, 47.5 on 40
+    xl: 1.5, // 24px on 16
+  },
+  spacingBase: 8, // 8px grid
+}

package/src/theme/cssMixins.ts

@@ -1,92 +1,92 @@
-import { css, SerializedStyles } from '@emotion/react'
-import { createTheme } from '@mui/material'
-
-import { coreThemeConstants } from './coreThemeConstants'
-
-const theme = createTheme({
-  spacing: coreThemeConstants.spacingBase,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-} as any)
-
-export const cssMixins = {
-  appHeaderHeight: '80px',
-  appFooterHeight: '80px',
-  colCentered: css`
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  `,
-  colHCentered: css`
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-  `,
-  colStretch: css`
-    display: flex;
-    flex-direction: column;
-  `,
-  colVCentered: css`
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-  `,
-  rowCentered: css`
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  `,
-  rowHCentered: css`
-    display: flex;
-    justify-content: center;
-  `,
-  rowStretch: css`
-    display: flex;
-  `,
-  rowSpaceBetweened: css`
-    display: flex;
-    justify-content: space-between;
-  `,
-  rowFlexEnd: css`
-    justify-content: flex-end;
-    display: flex;
-  `,
-  rowVCentered: css`
-    align-items: center;
-    display: flex;
-  `,
-  spaceSimpleH: (spacing: number): SerializedStyles => css`
-    margin-right: ${theme.spacing(spacing)};
-
-    &:last-child {
-      margin-right: 0;
-    }
-  `,
-  spaceSimpleV: (spacing: number): SerializedStyles => css`
-    margin-bottom: ${theme.spacing(spacing)};
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    + & {
-      margin-top: ${theme.spacing(spacing)};
-    }
-  `,
-  stretchAll: css`
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  `,
-  stretchBottom: css`
-    right: 0;
-    bottom: 0;
-    left: 0;
-  `,
-  stretchTop: css`
-    top: 0;
-    right: 0;
-    left: 0;
-  `,
-}
+import { css, SerializedStyles } from '@emotion/react'
+import { createTheme } from '@mui/material'
+
+import { coreThemeConstants } from './coreThemeConstants'
+
+const theme = createTheme({
+  spacing: coreThemeConstants.spacingBase,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any)
+
+export const cssMixins = {
+  appHeaderHeight: '80px',
+  appFooterHeight: '80px',
+  colCentered: css`
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  `,
+  colHCentered: css`
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+  `,
+  colStretch: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  colVCentered: css`
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+  `,
+  rowCentered: css`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  `,
+  rowHCentered: css`
+    display: flex;
+    justify-content: center;
+  `,
+  rowStretch: css`
+    display: flex;
+  `,
+  rowSpaceBetweened: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+  rowFlexEnd: css`
+    justify-content: flex-end;
+    display: flex;
+  `,
+  rowVCentered: css`
+    align-items: center;
+    display: flex;
+  `,
+  spaceSimpleH: (spacing: number): SerializedStyles => css`
+    margin-right: ${theme.spacing(spacing)};
+
+    &:last-child {
+      margin-right: 0;
+    }
+  `,
+  spaceSimpleV: (spacing: number): SerializedStyles => css`
+    margin-bottom: ${theme.spacing(spacing)};
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    + & {
+      margin-top: ${theme.spacing(spacing)};
+    }
+  `,
+  stretchAll: css`
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+  stretchBottom: css`
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+  stretchTop: css`
+    top: 0;
+    right: 0;
+    left: 0;
+  `,
+}

package/src/theme/hooks/useGetSizes.ts

@@ -1,34 +1,31 @@
-import { Theme, useMediaQuery } from '@mui/material'
-
-type UseGetSizesType = {
-  isAboveSm: boolean
-  isBelowLgSize: boolean
-  isBelowMdSize: boolean
-  isBelowXsSize: boolean
-  isLgSize: boolean
-  isMediumSize: boolean
-  isMobileDisplay: boolean
-  isXsSize: boolean
-}
-
-export function useGetSizes(theme: Theme): UseGetSizesType {
-  const isMobileDisplay = useMediaQuery(theme.breakpoints.down('md'))
-  const isLgSize = useMediaQuery(theme.breakpoints.up('lg'))
-  const isBelowLgSize = useMediaQuery(theme.breakpoints.down('lg'))
-  const isXsSize = useMediaQuery(theme.breakpoints.down('sm'))
-  const isAboveSm = useMediaQuery(theme.breakpoints.up('sm'))
-  const isBelowXsSize = useMediaQuery(theme.breakpoints.down('xs'))
-  const isBelowMdSize = useMediaQuery(theme.breakpoints.down('md'))
-  const isMediumSize = isMobileDisplay && isAboveSm
-
-  return {
-    isAboveSm,
-    isBelowLgSize,
-    isBelowMdSize,
-    isBelowXsSize,
-    isLgSize,
-    isMediumSize,
-    isMobileDisplay,
-    isXsSize,
-  }
-}
+import { Theme, useMediaQuery } from '@mui/material'
+
+type UseGetSizesType = {
+  isAboveSm: boolean
+  isBelowLgSize: boolean
+  isBelowMdSize: boolean
+  isLgSize: boolean
+  isMediumSize: boolean
+  isMobileDisplay: boolean
+  isXsSize: boolean
+}
+
+export function useGetSizes(theme: Theme): UseGetSizesType {
+  const isMobileDisplay = useMediaQuery(theme.breakpoints.down('md'))
+  const isLgSize = useMediaQuery(theme.breakpoints.up('lg'))
+  const isBelowLgSize = useMediaQuery(theme.breakpoints.down('lg'))
+  const isXsSize = useMediaQuery(theme.breakpoints.down('sm'))
+  const isAboveSm = useMediaQuery(theme.breakpoints.up('sm'))
+  const isBelowMdSize = useMediaQuery(theme.breakpoints.down('md'))
+  const isMediumSize = isMobileDisplay && isAboveSm
+
+  return {
+    isAboveSm,
+    isBelowLgSize,
+    isBelowMdSize,
+    isLgSize,
+    isMediumSize,
+    isMobileDisplay,
+    isXsSize,
+  }
+}

package/src/theme/index.ts

@@ -1,24 +1,24 @@
-import { createTheme } from '@mui/material'
-
-import { breakpoints } from './breakpoints'
-import { components } from './components'
-import { coreThemeConstants } from './coreThemeConstants'
-import { cssMixins } from './cssMixins'
-import { paletteCore } from './palette'
-import { shape } from './shape'
-import { typography } from './typography'
-
-export * from './components'
-
-const themeBase = createTheme({
-  breakpoints,
-  cssMixins,
-  palette: paletteCore,
-  shape,
-  spacing: coreThemeConstants.spacingBase,
-  typography,
-})
-
-export const themeHuma = createTheme(themeBase, {
-  components: components(themeBase),
-})
+import { createTheme } from '@mui/material'
+
+import { breakpoints } from './breakpoints'
+import { components } from './components'
+import { coreThemeConstants } from './coreThemeConstants'
+import { cssMixins } from './cssMixins'
+import { paletteCore } from './palette'
+import { shape } from './shape'
+import { typography } from './typography'
+
+export * from './components'
+
+const themeBase = createTheme({
+  breakpoints,
+  cssMixins,
+  palette: paletteCore,
+  shape,
+  spacing: coreThemeConstants.spacingBase,
+  typography,
+})
+
+export const themeHuma = createTheme(themeBase, {
+  components: components(themeBase),
+})