@huma-finance/widgets 0.0.12 → 0.0.15

package/src/cosmos/SuperfluidFactoringBorrow.fixture.tsx

@@ -1,6 +1,9 @@
 import { SuperfluidFactoringWidget } from '..'
+import { initEnv } from './utils/env'
 import { WalletWrapper } from './WalletWrapper'
 
+initEnv()
+
 function Fixture() {
   return <SuperfluidFactoringWidget />
 }

package/src/cosmos/utils/env.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck
+
+export const initEnv = () => {
+  window.REACT_APP_FORCE_DEV_PREFIX_FOR_URLS =
+    process.env.REACT_APP_FORCE_DEV_PREFIX_FOR_URLS
+}

package/src/hooks/useEA.ts

@@ -1,59 +1,40 @@
-import { useWeb3React } from '@web3-react/core'
 import {
-  downScale,
   EAPayload,
   EARejectionError,
   EARejectMessage,
   EARejectReason,
   EAService,
 } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
 import { useCallback } from 'react'
 
-import { setApproval, setError, setStep } from '../store/widgets.reducers'
+import { setApproval, setError } from '../store/widgets.reducers'
 import { WIDGET_STEP } from '../store/widgets.store'
-import { useAppDispatch } from './useRedux'
 import { envUtil } from '../utils/env'
+import { useAppDispatch } from './useRedux'
 
 const useEA = () => {
   const dispatch = useAppDispatch()
   const { chainId } = useWeb3React()
 
   const checkingEA = useCallback(
-    async (
-      payload: EAPayload,
-      nextStep: WIDGET_STEP,
-      addToAllowList = false,
-    ) => {
+    async (payload: EAPayload, nextStep: WIDGET_STEP) => {
       try {
         const result = await EAService.approve(
           payload,
           chainId!,
           envUtil.checkIsDev(),
         )
-        result.terms.creditLimit = downScale<number>(
-          result.terms.creditLimit,
-          result.token.decimal,
-        )
-        if (result.receivable) {
-          result.receivable.amount = downScale<number>(
-            result.receivable.amount,
-            result.token.decimal,
-          )
-        }
         dispatch(setApproval({ ...result, nextStep }))
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {
         if (e instanceof EARejectionError) {
-          if (addToAllowList) {
-            dispatch(setStep(WIDGET_STEP.AddToAllowList))
-          } else {
-            dispatch(
-              setError({
-                errorMessage: EARejectMessage,
-                errorReason: EARejectReason,
-              }),
-            )
-          }
+          dispatch(
+            setError({
+              errorMessage: EARejectMessage,
+              errorReason: EARejectReason,
+            }),
+          )
         } else {
           dispatch(
             setError({

package/src/index.tsx

@@ -4,12 +4,15 @@ import { JsonRpcProvider } from '@ethersproject/providers'
 import {
   Provider as Web3Provider,
   ProviderProps as Web3Props,
+  supportedChainId,
 } from '@huma-finance/shared'
 import { ThemeProvider } from '@mui/material'
 import { Provider as Eip1193Provider } from '@web3-react/types'
 import { Provider as AtomProvider } from 'jotai'
+import { useCallback, useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 
+import { ChainNotSupportedModal } from './components/ChainNotSupportedModal'
 import {
   CreditLineBorrow,
   CreditLineBorrowProps,
@@ -45,16 +48,94 @@ type JsonRpcConnectionMap = {
 /**
  * Object representing the props passed to web3 provider
  * @typedef {Object} WidgetProps
+ * @property {desiredChainId|undefined} desiredChainId Optional desired chain id, will trigger the switch network action if different from the current chain id
  * @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 = {
+  handleClose?: () => void
+  desiredChainId?: number
   jsonRpcUrlMap?: JsonRpcConnectionMap
   provider?: Eip1193Provider | JsonRpcProvider | null
 }
 
 function Widget(props: WCProps<WidgetProps>) {
-  const { children } = props
+  const { children, desiredChainId } = props
+  // @ts-ignore
+  const netWorkVersion = window.ethereum?.networkVersion
+  const [currentChainId, setCurrentChainId] = useState<number | undefined>(
+    netWorkVersion ? Number(netWorkVersion) : undefined,
+  )
+  const chainSupported = !!supportedChainId(currentChainId)
+  const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
+
+  useEffect(() => {
+    setCurrentChainId(netWorkVersion ? Number(netWorkVersion) : undefined)
+  }, [netWorkVersion])
+
+  useEffect(() => {
+    if (chainSupported) {
+      setChainNotSupportedOpen(false)
+    } else {
+      setChainNotSupportedOpen(true)
+    }
+  }, [chainSupported])
+
+  useEffect(() => {
+    const chainChangeListener = (chainId: number) => {
+      setCurrentChainId(chainId)
+    }
+
+    if (window.ethereum) {
+      // @ts-ignore
+      window.ethereum?.on('chainChanged', chainChangeListener)
+    }
+    return () => {
+      if (window.ethereum) {
+        // @ts-ignore
+        window.ethereum?.removeListener('chainChanged', chainChangeListener)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (
+      window.ethereum &&
+      desiredChainId &&
+      currentChainId !== desiredChainId
+    ) {
+      const changeNetwork = async () => {
+        try {
+          // @ts-ignore
+          await window.ethereum.request({
+            method: 'wallet_switchEthereumChain',
+            params: [{ chainId: `0x${Number(desiredChainId).toString(16)}` }],
+          })
+        } catch (error) {
+          console.error(error)
+        }
+      }
+      changeNetwork()
+    }
+  }, [currentChainId, desiredChainId])
+
+  const handleCloseCallback = useCallback(() => {
+    setChainNotSupportedOpen(false)
+  }, [])
+
+  if (!chainSupported) {
+    return (
+      <ThemeProvider theme={themeHuma}>
+        <ReduxProvider store={store}>
+          <ChainNotSupportedModal
+            isOpen={chainNotSupportedOpen}
+            handleClose={handleCloseCallback}
+          />
+        </ReduxProvider>
+      </ThemeProvider>
+    )
+  }
+
   return (
     <ThemeProvider theme={themeHuma}>
       <ReduxProvider store={store}>
@@ -78,7 +159,7 @@ type InvoiceFactoringBorrowWidgetProps = InvoiceFactoringBorrowProps &
 /**
  * Invoice factoring borrow widget
  *
- * @param {InvoiceFactoringBorrowWidgetProps} props - The invoice factoring pool borrow widget props.
+ * @param {InvoiceFactoringBorrowProps | WidgetProps} props - The invoice factoring pool borrow widget props.
  * @returns Invoice factoring pool borrow widget component
  */
 export function InvoiceFactoringBorrowWidget(
@@ -103,7 +184,7 @@ type InvoiceFactoringPaymentWidgetProps = InvoiceFactoringPaymentProps &
 /**
  * Invoice factoring payment widget
  *
- * @param {InvoiceFactoringPaymentWidgetProps} props - The invoice factoring pool payment widget props.
+ * @param {InvoiceFactoringPaymentProps | WidgetProps} props - The invoice factoring pool payment widget props.
  * @returns Invoice factoring pool payment widget component
  */
 export function InvoiceFactoringPaymentWidget(
@@ -127,7 +208,7 @@ type CreditLineBorrowWidgetProps = CreditLineBorrowProps & WidgetProps
 /**
  * Credit line borrow widget
  *
- * @param {CreditLineBorrowWidgetProps} props - The credit line pool borrow widget props.
+ * @param {CreditLineBorrowProps | WidgetProps} props - The credit line pool borrow widget props.
  * @returns Credit line pool borrow widget component
  */
 export function CreditLineBorrowWidget(props: CreditLineBorrowWidgetProps) {
@@ -149,7 +230,7 @@ type CreditLinePaymentWidgetProps = CreditLinePaymentProps & WidgetProps
 /**
  * Credit line payment widget
  *
- * @param {CreditLinePaymentWidgetProps} props - The credit line pool payment widget props.
+ * @param {CreditLinePaymentProps | WidgetProps} props - The credit line pool payment widget props.
  * @returns Credit line pool payment widget component
  */
 export function CreditLinePaymentWidget(props: CreditLinePaymentWidgetProps) {
@@ -171,7 +252,7 @@ type LendSupplyWidgetProps = LendSupplyProps & WidgetProps
 /**
  * Lend supply widget
  *
- * @param {LendSupplyWidgetProps} props - The lend pool supply widget props.
+ * @param {LendSupplyProps | WidgetProps} props - The lend pool supply widget props.
  * @returns Lend pool supply widget component
  */
 export function LendSupplyWidget(props: LendSupplyWidgetProps) {
@@ -193,7 +274,7 @@ type LendWithdrawWidgetProps = LendWithdrawProps & WidgetProps
 /**
  * Lend withdraw widget
  *
- * @param {LendWithdrawProps & WidgetProps} props The lend pool withdraw widget props
+ * @param {LendWithdrawProps | WidgetProps} props The lend pool withdraw widget props
  * @returns Lend pool withdraw widget component
  */
 export function LendWithdrawWidget(props: LendWithdrawWidgetProps) {

package/src/reportWebVitals.ts

@@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+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);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

package/src/store/widgets.store.ts

@@ -7,7 +7,6 @@ export enum WIDGET_TYPE {
 
 export enum WIDGET_STEP {
   Evaluation = 'Evaluation',
-  AddToAllowList = 'AddToAllowList',
   ChooseAmount = 'ChooseAmount',
   Permit = 'Permit',
   ApproveAllowance = 'ApproveAllowance',

package/src/utilTypes.d.ts

@@ -25,5 +25,7 @@ export type CustomError = {
 declare global {
   interface Window {
     REACT_APP_FORCE_DEV_PREFIX_FOR_URLS: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ethereum: any
   }
 }

package/webpack.cosmos.js

@@ -40,15 +40,15 @@ module.exports = (webpackConfig) => {
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
-      // new webpack.DefinePlugin({
-      //   ...Object.entries(dotenv.config().parsed).reduce(
-      //     (acc, curr) => ({
-      //       ...acc,
-      //       [`process.env.${curr[0]}`]: JSON.stringify(curr[1]),
-      //     }),
-      //     {},
-      //   ),
-      // }),
+      new webpack.DefinePlugin({
+        ...Object.entries(dotenv.config().parsed).reduce(
+          (acc, curr) => ({
+            ...acc,
+            [`process.env.${curr[0]}`]: JSON.stringify(curr[1]),
+          }),
+          {},
+        ),
+      }),
     ],
   }
 }

package/src/components/AllowListModal.tsx

@@ -1,113 +0,0 @@
-import { Box, Button, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  EARejectMessageWithAllowList,
-  EARejectReason,
-  EAService,
-  PoolInfoType,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { CustomError } from '../utilTypes'
-import { ErrorModal } from './ErrorModal'
-import { CheckCircleIcon } from './icons'
-import { LoadingModal } from './LoadingModal'
-import { WrapperModal } from './WrapperModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleSuccess: () => void
-  handleError: (errorMessage: string) => void
-}
-
-export function AllowListModal({
-  poolInfo,
-  handleSuccess,
-  handleError,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const { account } = useWeb3React()
-  const [status, setStatus] = useState<
-    'notApproved' | 'approving' | 'approved'
-  >('notApproved')
-
-  const styles = {
-    congratsWrapper: css`
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      padding: 0 16px;
-      ${theme.cssMixins.rowVCentered}
-      margin-top: 60px;
-      height: 52px;
-      background: linear-gradient(
-          0deg,
-          rgba(255, 255, 255, 0.9),
-          rgba(255, 255, 255, 0.9)
-        ),
-        #2e7d32;
-      border-radius: 4px;
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  const addToAllowList = useCallback(async () => {
-    try {
-      setStatus('approving')
-      await EAService.addToAllowList(account!, poolInfo.pool)
-      setStatus('approved')
-    } catch (e) {
-      const error = e as CustomError
-      handleError(error.message)
-    }
-  }, [account, handleError, poolInfo.pool])
-
-  const continueToBorrow = () => {
-    handleSuccess()
-  }
-
-  if (status === 'approving') {
-    return (
-      <LoadingModal
-        title='Add To Allowlist'
-        description='Waiting for approval confirmation...'
-      />
-    )
-  }
-
-  if (status === 'approved') {
-    return (
-      <WrapperModal title='Add To Allowlist'>
-        <>
-          <Box css={styles.congratsWrapper}>
-            <CheckCircleIcon />
-            <Box sx={{ marginLeft: '6px' }}>
-              Congrats, you have been added to the allowlist
-            </Box>
-          </Box>
-          <Box css={styles.bottom}>
-            <Button variant='contained' onClick={continueToBorrow}>
-              CONTINUE TO BORROW
-            </Button>
-          </Box>
-        </>
-      </WrapperModal>
-    )
-  }
-
-  return (
-    <ErrorModal
-      title='Application Not Approved'
-      errorReason={EARejectReason}
-      errorMessage={EARejectMessageWithAllowList}
-      handleOk={addToAllowList}
-      okText='ADD ME TO ALLOWLIST'
-      shouldResetState={false}
-    />
-  )
-}

package/src/components/CreditLine/borrow/2-AllowList.tsx

@@ -1,34 +0,0 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { AllowListModal } from '../../AllowListModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-}
-
-export function AllowList({ poolInfo }: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  const handleError = useCallback(
-    (errorMessage: string) => {
-      dispatch(setError({ errorMessage }))
-    },
-    [dispatch],
-  )
-
-  return (
-    <AllowListModal
-      poolInfo={poolInfo}
-      handleSuccess={handleSuccess}
-      handleError={handleError}
-    />
-  )
-}

package/src/components/InvoiceFactoring/borrow/2-AllowList.tsx

@@ -1,34 +0,0 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { AllowListModal } from '../../AllowListModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-}
-
-export function AllowList({ poolInfo }: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  const handleError = useCallback(
-    (errorMessage: string) => {
-      dispatch(setError({ errorMessage }))
-    },
-    [dispatch],
-  )
-
-  return (
-    <AllowListModal
-      poolInfo={poolInfo}
-      handleSuccess={handleSuccess}
-      handleError={handleError}
-    />
-  )
-}

package/src/components/InvoiceFactoring/borrow/4-ConfirmTransfer.tsx

@@ -1,104 +0,0 @@
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { isEmpty } from '@huma-finance/shared'
-import React from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-export function ConfirmTransfer(): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-      ${theme.cssMixins.colStretch};
-    `,
-    header: css`
-      font-family: 'Uni-Neue-Bold';
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      margin-top: 30px;
-      text-align: center;
-    `,
-    transferWrapper: css`
-      margin-top: 75px;
-    `,
-    transfer: css`
-      font-family: 'Uni-Neue-Regular';
-      ${theme.cssMixins.rowSpaceBetweened}
-      ${theme.cssMixins.rowVCentered}
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      padding: 24px 32px;
-      margin-bottom: 9px;
-      position: relative;
-      box-sizing: border-box;
-    `,
-    arrow: css`
-      color: #d2d0d6;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    `,
-    okButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.ApproveNFT))
-  }
-
-  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
-    return null
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Confirm transaction details
-      </Typography>
-      <Box css={styles.description}>
-        Huma keeps your Invoice NFT as collateral until it's fully paid.
-      </Box>
-      <Box css={styles.transferWrapper}>
-        <Box css={styles.transfer}>
-          <Box>Invoice NFT</Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>Huma</Box>
-        </Box>
-        <Box css={styles.transfer}>
-          <Box>
-            {borrowAmountNet!} {approval?.token.symbol}
-          </Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>You</Box>
-        </Box>
-      </Box>
-      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
-        Approve Transfer
-      </Button>
-    </Box>
-  )
-}