@huma-finance/widgets 0.0.6-alpha.0

package/src/index.tsx

@@ -0,0 +1,219 @@
+import './index.css'
+
+import { JsonRpcProvider } from '@ethersproject/providers'
+import { ThemeProvider } from '@mui/material'
+import { Provider as Eip1193Provider } from '@web3-react/types'
+import {
+  Provider as Web3Provider,
+  ProviderProps as Web3Props,
+} from '@huma-finance/shared'
+import { Provider as AtomProvider } from 'jotai'
+import { Provider as ReduxProvider } from 'react-redux'
+
+import {
+  CreditLineBorrow,
+  CreditLineBorrowProps,
+} from './components/CreditLine/borrow'
+import {
+  CreditLinePayment,
+  CreditLinePaymentProps,
+} from './components/CreditLine/payment'
+import {
+  InvoiceFactoringBorrow,
+  InvoiceFactoringBorrowProps,
+} from './components/InvoiceFactoring/borrow'
+import {
+  InvoiceFactoringPayment,
+  InvoiceFactoringPaymentProps,
+} from './components/InvoiceFactoring/payment'
+import { LendSupply, LendSupplyProps } from './components/Lend/supply'
+import { LendWithdraw, LendWithdrawProps } from './components/Lend/withdraw'
+import { SuperfluidFactoring } from './components/SuperfluidFactoring'
+import { store } from './store'
+import { themeHuma } from './theme'
+import { WCProps } from './utilTypes'
+
+/**
+ * Mapping of your JSON-RPC connections indexed by chainId
+ * @typedef {Object} JsonRpcConnectionMap
+ * @property {Object.<number, string|Array<string>|JsonRpcProvider|Array<JsonRpcProvider>>} chainId Chain id to map the JSON-RPC URL/URLs or JsonRpcProvider/JsonRpcProviders
+ */
+type JsonRpcConnectionMap = {
+  [chainId: number]: string | string[] | JsonRpcProvider | JsonRpcProvider[]
+}
+
+/**
+ * Object representing the props passed to web3 provider
+ * @typedef {Object} WidgetProps
+ * @property {JsonRpcConnectionMap|undefined} jsonRpcUrlMap Optional mapping of your JSON-RPC connections indexed by chainId
+ * @property {Eip1193Provider|JsonRpcProvider|null|undefined} provider Optional EIP-1193 provider or JsonRpc Provider
+ */
+type WidgetProps = {
+  jsonRpcUrlMap?: JsonRpcConnectionMap
+  provider?: Eip1193Provider | JsonRpcProvider | null
+}
+
+function Widget(props: WCProps<WidgetProps>) {
+  const { children } = props
+  return (
+    <ThemeProvider theme={themeHuma}>
+      <ReduxProvider store={store}>
+        <Web3Provider {...(props as Web3Props)}>
+          <AtomProvider>{children}</AtomProvider>
+        </Web3Provider>
+      </ReduxProvider>
+    </ThemeProvider>
+  )
+}
+
+/**
+ * Invoice factoring pool borrow widget props
+ * @typedef {Object} InvoiceFactoringBorrowWidgetProps
+ * @property {InvoiceFactoringBorrowProps} InvoiceFactoringBorrowProps - Invoice factoring pool borrow props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type InvoiceFactoringBorrowWidgetProps = InvoiceFactoringBorrowProps &
+  WidgetProps
+
+/**
+ * Invoice factoring borrow widget
+ *
+ * @param {InvoiceFactoringBorrowWidgetProps} props - The invoice factoring pool borrow widget props.
+ * @returns Invoice factoring pool borrow widget component
+ */
+export function InvoiceFactoringBorrowWidget(
+  props: InvoiceFactoringBorrowWidgetProps,
+) {
+  return (
+    <Widget {...props}>
+      <InvoiceFactoringBorrow {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Invoice factoring pool payment widget props
+ * @typedef {Object} InvoiceFactoringPaymentWidgetProps
+ * @property {InvoiceFactoringPaymentProps} InvoiceFactoringPaymentProps - Invoice factoring pool payment props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type InvoiceFactoringPaymentWidgetProps = InvoiceFactoringPaymentProps &
+  WidgetProps
+
+/**
+ * Invoice factoring payment widget
+ *
+ * @param {InvoiceFactoringPaymentWidgetProps} props - The invoice factoring pool payment widget props.
+ * @returns Invoice factoring pool payment widget component
+ */
+export function InvoiceFactoringPaymentWidget(
+  props: InvoiceFactoringPaymentWidgetProps,
+) {
+  return (
+    <Widget {...props}>
+      <InvoiceFactoringPayment {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Credit line pool borrow widget props
+ * @typedef {Object} CreditLineBorrowWidgetProps
+ * @property {CreditLineBorrowProps} CreditLineBorrowProps - Credit line pool borrow props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CreditLineBorrowWidgetProps = CreditLineBorrowProps & WidgetProps
+
+/**
+ * Credit line borrow widget
+ *
+ * @param {CreditLineBorrowWidgetProps} props - The credit line pool borrow widget props.
+ * @returns Credit line pool borrow widget component
+ */
+export function CreditLineBorrowWidget(props: CreditLineBorrowWidgetProps) {
+  return (
+    <Widget {...props}>
+      <CreditLineBorrow {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Credit line pool payment widget props
+ * @typedef {Object} CreditLinePaymentWidgetProps
+ * @property {CreditLinePaymentProps} CreditLinePaymentProps - Credit line pool payment props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CreditLinePaymentWidgetProps = CreditLinePaymentProps & WidgetProps
+
+/**
+ * Credit line payment widget
+ *
+ * @param {CreditLinePaymentWidgetProps} props - The credit line pool payment widget props.
+ * @returns Credit line pool payment widget component
+ */
+export function CreditLinePaymentWidget(props: CreditLinePaymentWidgetProps) {
+  return (
+    <Widget {...props}>
+      <CreditLinePayment {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Lend pool supply widget props
+ * @typedef {Object} LendSupplyWidgetProps
+ * @property {LendSupplyProps} LendSupplyProps - Lend pool supply props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type LendSupplyWidgetProps = LendSupplyProps & WidgetProps
+
+/**
+ * Lend supply widget
+ *
+ * @param {LendSupplyWidgetProps} props - The lend pool supply widget props.
+ * @returns Lend pool supply widget component
+ */
+export function LendSupplyWidget(props: LendSupplyWidgetProps) {
+  return (
+    <Widget {...props}>
+      <LendSupply {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Lend pool withdraw widget props
+ * @typedef {Object} LendWithdrawWidgetProps
+ * @property {LendWithdrawProps} LendWithdrawProps - Lend pool withdraw props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type LendWithdrawWidgetProps = LendWithdrawProps & WidgetProps
+
+/**
+ * Lend withdraw widget
+ *
+ * @param {LendWithdrawProps & WidgetProps} props The lend pool withdraw widget props
+ * @returns Lend pool withdraw widget component
+ */
+export function LendWithdrawWidget(props: LendWithdrawWidgetProps) {
+  return (
+    <Widget {...props}>
+      <LendWithdraw {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Superfluid factoring widget
+ *
+ * @param {WidgetProps} props - The superfluid factoring widget props.
+ * @returns Superfluid factoring widget component
+ */
+export function SuperfluidFactoringWidget(props: WidgetProps) {
+  return (
+    <Widget {...props}>
+      <SuperfluidFactoring />
+    </Widget>
+  )
+}

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

package/src/store/index.ts

@@ -0,0 +1,27 @@
+import {
+  Action,
+  ActionCreator,
+  AnyAction,
+  configureStore,
+  ThunkAction,
+} from '@reduxjs/toolkit'
+
+import widgetsReducers from './widgets.reducers'
+
+export const store = configureStore({
+  reducer: {
+    widget: widgetsReducers,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>
+export type AppActionThunk<ReturnType = void> = ActionCreator<
+  ThunkAction<ReturnType, RootState, unknown, AnyAction>
+>

package/src/store/widgets.reducers.ts

@@ -0,0 +1,120 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { ApproveInfo } from '@huma-finance/shared'
+
+import {
+  initialWidgetState,
+  MultisendPayload,
+  WIDGET_STEP,
+  WidgetStream,
+} from './widgets.store'
+
+export const widgetSlice = createSlice({
+  name: 'widget',
+  initialState: initialWidgetState,
+  reducers: {
+    resetState: (state) => {
+      state.errorReason = ''
+      state.errorMessage = ''
+      state.step = undefined
+      state.approveInfo = undefined
+      state.borrowAmount = undefined
+      state.borrowAmountBN = undefined
+      state.chargedFees = undefined
+      state.borrowAmountNet = undefined
+      state.remainder = undefined
+      state.tokenId = undefined
+      state.paymentAmount = undefined
+      state.remainDueAmount = undefined
+      state.stream = undefined
+      state.multisend = undefined
+      state.supplyAmount = undefined
+      state.withdrawAmount = undefined
+    },
+    setStep: (state, { payload }: PayloadAction<WIDGET_STEP>) => {
+      state.step = payload
+    },
+    setApproveInfo: (
+      state,
+      { payload }: PayloadAction<ApproveInfo & { nextStep: WIDGET_STEP }>,
+    ) => {
+      state.approveInfo = payload
+      if (Number(payload.creditLimit) > 0) {
+        state.step = payload.nextStep
+      } else {
+        state.errorMessage =
+          'Sorry, there was an error with your transaction. Please try submitting again.'
+        state.step = WIDGET_STEP.Error
+      }
+    },
+    setBorrowInfo: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{
+        borrowAmount: number
+        borrowAmountBN: string
+        chargedFees: number
+        nextStep: WIDGET_STEP
+        remainder?: number
+      }>,
+    ) => {
+      state.borrowAmount = payload.borrowAmount
+      state.borrowAmountBN = payload.borrowAmountBN
+      state.remainder = payload.remainder
+      state.chargedFees = payload.chargedFees
+      state.borrowAmountNet = payload.borrowAmount - payload.chargedFees
+      state.step = payload.nextStep
+    },
+    setTokenId: (state, { payload }: PayloadAction<string>) => {
+      state.tokenId = payload
+    },
+    setPaymentAmount: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{ paymentAmount: number; remainDueAmount?: number }>,
+    ) => {
+      state.paymentAmount = payload.paymentAmount
+      state.remainDueAmount = payload.remainDueAmount
+    },
+    setSupplyAmount: (state, { payload }: PayloadAction<number>) => {
+      state.supplyAmount = payload
+    },
+    setWithdrawAmount: (state, { payload }: PayloadAction<number>) => {
+      state.withdrawAmount = payload
+    },
+    setStream: (state, { payload }: PayloadAction<WidgetStream>) => {
+      const stream = state.stream ?? {}
+      state.stream = { ...stream, ...payload }
+    },
+    setMultisend: (state, { payload }: PayloadAction<MultisendPayload>) => {
+      state.multisend = payload
+    },
+    setError: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{ errorMessage: string; errorReason?: string }>,
+    ) => {
+      state.errorMessage = payload.errorMessage
+      state.errorReason = payload.errorReason
+      state.step = WIDGET_STEP.Error
+    },
+  },
+})
+
+export const {
+  resetState,
+  setStep,
+  setApproveInfo,
+  setBorrowInfo,
+  setError,
+  setTokenId,
+  setPaymentAmount,
+  setStream,
+  setMultisend,
+  setSupplyAmount,
+  setWithdrawAmount,
+} = widgetSlice.actions
+
+export default widgetSlice.reducer

package/src/store/widgets.selectors.ts

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

package/src/store/widgets.store.ts

@@ -0,0 +1,55 @@
+import { ApproveInfo } from '@huma-finance/shared'
+
+export enum WIDGET_TYPE {
+  BORROW = 'BORROW',
+  PAYMENT = 'PAYMENT',
+}
+
+export enum WIDGET_STEP {
+  Evaluation = 'Evaluation',
+  AddToAllowList = 'AddToAllowList',
+  ChooseAmount = 'ChooseAmount',
+  Permit = 'Permit',
+  ApproveAllowance = 'ApproveAllowance',
+  MintNFT = 'MintNFT',
+  ConfirmTransfer = 'ConfirmTransfer',
+  ApproveNFT = 'ApproveNFT',
+  Transfer = 'Transfer',
+  CheckWithdrawable = 'CheckWithdrawable',
+  Done = 'Done',
+  Error = 'Error',
+}
+
+export type WidgetStream = Partial<{
+  borrowFlowrate: string
+  durationInSeconds: number
+}>
+
+export type MultisendPayload = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  addresses: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  callData: any[]
+}
+
+export type WidgetState = {
+  step?: WIDGET_STEP
+  type?: WIDGET_TYPE
+  approveInfo?: ApproveInfo
+  borrowAmount?: number
+  borrowAmountBN?: string
+  chargedFees?: number
+  borrowAmountNet?: number
+  remainder?: number
+  paymentAmount?: number
+  remainDueAmount?: number
+  supplyAmount?: number
+  withdrawAmount?: number
+  errorMessage?: string
+  errorReason?: string
+  tokenId?: string
+  stream?: WidgetStream
+  multisend?: MultisendPayload
+}
+
+export const initialWidgetState: WidgetState = {}

package/src/theme/breakpoints.ts

@@ -0,0 +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 },
+}

package/src/theme/components.ts

@@ -0,0 +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,
+        },
+      },
+    },
+  }
+}

package/src/theme/coreThemeConstants.ts

@@ -0,0 +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
+}

package/src/theme/cssMixins.ts

@@ -0,0 +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;
+  `,
+}

package/src/theme/hooks/useGetSizes.ts

@@ -0,0 +1,34 @@
+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,
+  }
+}