@huma-finance/widgets 0.0.6-alpha.0

package/src/components/ApproveAllowanceModal.tsx

@@ -0,0 +1,118 @@
+import { MaxUint256 } from '@ethersproject/constants'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import {
+  PoolInfoType,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  useMount,
+  usePoolUnderlyingTokenContract,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect } from 'react'
+
+import { BottomButton } from './BottomButton'
+import { AutoPaybackIcon } from './icons'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  showAutoPayback?: boolean
+  allowanceAmount?: BigNumber
+  handleSuccess: () => void
+}
+
+export function ApproveAllowanceModal({
+  poolInfo,
+  showAutoPayback = false,
+  allowanceAmount,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const { provider } = useWeb3React()
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol } = poolUnderlyingToken
+  const poolUnderlyingTokenContract = usePoolUnderlyingTokenContract(
+    poolInfo.poolName,
+    poolInfo.poolType,
+  )
+  const reset = useResetAtom(txAtom)
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const waitingForAccept = state === TxStateType.New
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      reset()
+      handleSuccess()
+    }
+  }, [handleSuccess, reset, state, symbol])
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 30px;
+    `,
+    description: css`
+      margin-top: 14px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      padding: 0 12px;
+    `,
+  }
+
+  const sendApprove = useCallback(() => {
+    send({
+      contract: poolUnderlyingTokenContract!,
+      method: 'approve',
+      params: [poolInfo.pool, allowanceAmount ?? MaxUint256],
+      provider,
+    })
+  }, [
+    allowanceAmount,
+    poolInfo.pool,
+    poolUnderlyingTokenContract,
+    provider,
+    send,
+  ])
+
+  useMount(() => {
+    if (!showAutoPayback) {
+      sendApprove()
+    }
+  })
+
+  if (showAutoPayback && waitingForAccept) {
+    return (
+      <WrapperModal
+        title='Auto Payback'
+        subTitle='Enable auto payback and never miss payments. You only need to do it once.'
+      >
+        <Box css={styles.iconWrapper}>
+          <AutoPaybackIcon />
+        </Box>
+        <Box css={styles.description}>
+          This allowance transaction removes the need to confirm follow up{' '}
+          {symbol} transactions. Gas is on us.
+        </Box>
+        <BottomButton variant='contained' onClick={sendApprove}>
+          APPROVE {symbol} PAYMENTS
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title={`Approve ${symbol}`}
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/BottomButton.tsx

@@ -0,0 +1,31 @@
+import { Box, Button, css } from '@mui/material'
+import React from 'react'
+
+import { WCProps } from '../utilTypes'
+
+type Props = {
+  variant: 'contained' | 'outlined'
+  onClick?: () => void
+}
+
+export function BottomButton({
+  variant,
+  onClick,
+  children,
+}: WCProps<Props>): React.ReactElement {
+  const styles = css`
+    & .MuiButtonBase-root {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    }
+  `
+
+  return (
+    <Box css={styles}>
+      <Button variant={variant} onClick={onClick}>
+        {children}
+      </Button>
+    </Box>
+  )
+}

package/src/components/ChooseAmountModal.tsx

@@ -0,0 +1,315 @@
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
+import {
+  Box,
+  Button,
+  css,
+  Divider,
+  Input,
+  Slider,
+  useTheme,
+} from '@mui/material'
+import { useMQ } from '@huma-finance/shared'
+import React from 'react'
+
+import { IconType } from '../utilTypes'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  tokenIcon?: IconType
+  description1?: string
+  description2?: string
+  currentAmount: number
+  sliderMax: number
+  tokenSymbol: string
+  topLeft?: string
+  topRight?: string
+  downLeft?: string
+  downRight?: string
+  actionText?: string
+  hideTerms?: boolean
+  payoffAmount?: number
+  type?: 'slider' | 'input'
+  handleChangeAmount: (amount: number) => void
+  handleAction: () => void
+}
+
+export function ChooseAmountModal({
+  title,
+  tokenIcon,
+  description1,
+  description2,
+  currentAmount,
+  sliderMax,
+  tokenSymbol,
+  topLeft,
+  topRight,
+  downLeft,
+  downRight,
+  actionText = 'accept terms',
+  payoffAmount,
+  hideTerms = false,
+  type = 'slider',
+  handleChangeAmount,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const { isXsSize } = useMQ()
+
+  const styles = {
+    subTitle: css`
+      font-family: 'Uni-Neue-Regular';
+    `,
+    description2: css`
+      ${theme.cssMixins.rowCentered};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      margin-top: 16px;
+    `,
+    chosenAmountWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      background: linear-gradient(232.71deg, #a363f4 4.17%, #ff6a8a 178.69%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 700;
+      font-size: 32px;
+      margin-bottom: 10px;
+      margin-top: 30px;
+    `,
+    chosenAmount: css`
+      font-family: 'Inter-Bold';
+      font-size: 32px;
+    `,
+    chosenAmountSymbol: css`
+      font-size: 75%;
+      margin-left: 5px;
+      letter-spacing: 0.1px;
+    `,
+    inputAmountWrapper: css`
+      margin-bottom: 10px;
+      margin-top: 30px;
+    `,
+    inputAmount: css`
+      ${theme.cssMixins.rowSpaceBetweened};
+    `,
+    inputField: css`
+      width: 100%;
+    `,
+    maxButton: css`
+      width: 80px;
+    `,
+    amountAvailable: css`
+      ${theme.cssMixins.rowVCentered};
+      margin-top: 5px;
+      margin-bottom: 100px;
+      font-size: 16px;
+      & > svg {
+        margin-right: 5px;
+      }
+    `,
+    tokenIcon: {
+      width: '16px',
+      height: '16px',
+    },
+    editIcon: css`
+      color: ${theme.palette.primary.main};
+      cursor: pointer;
+      display: inline-grid;
+      vertical-align: middle;
+      & > svg {
+        font-size: 24px;
+      }
+      & > svg:first-of-type {
+        margin-bottom: -10px;
+      }
+    `,
+    input: css`
+      font-size: 18px;
+      -webkit-text-fill-color: ${theme.palette.primary.main};
+    `,
+    slider: css`
+      margin-bottom: 54px;
+      &.MuiSlider-root {
+        height: 8px !important;
+        color: #e9e9e9;
+      }
+      & .MuiSlider-track {
+        height: 8px !important;
+        background: linear-gradient(232.71deg, #a363f4 4.17%, #ff6a8a 178.69%);
+        border-radius: 8px;
+      }
+      & .MuiSlider-thumb::before {
+        background: #ffffff;
+        border: 1px solid #f9f9f9;
+        box-shadow: 1px 1px 12px 2px rgba(163, 100, 244, 0.6);
+        border-radius: 50px;
+        width: 24px;
+        height: 24px;
+      }
+    `,
+    info: css`
+      font-family: 'Uni-Neue-Regular';
+      ${theme.cssMixins.rowSpaceBetweened};
+      font-weight: 400;
+      font-size: 16px;
+      color: #423b46;
+    `,
+    divider: css`
+      margin: 16px 0;
+      background: #49505b;
+      border-color: #e9e3f1;
+    `,
+    okButton: css`
+      font-family: 'Uni-Neue-Bold';
+      width: 100%;
+      position: absolute;
+      bottom: ${isXsSize ? 20 : 0}px;
+    `,
+    terms: css`
+      ${theme.cssMixins.rowHCentered};
+      font-weight: 400;
+      font-size: 12px;
+      color: #a8a1b2;
+      margin-top: 8px;
+      letter-spacing: 0px;
+      width: 100%;
+      position: absolute;
+      bottom: -22px;
+    `,
+  }
+
+  const handleSliderChange = (event: Event, newValue: number | number[]) => {
+    handleChangeAmount(newValue as number)
+  }
+
+  const handleInputChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    // @ts-ignore
+    handleChangeAmount(event.target.value)
+  }
+
+  const handleSetMax = () => {
+    handleChangeAmount(sliderMax)
+  }
+
+  const handleIncrement = () => {
+    const newAmount = currentAmount + 1
+    if (newAmount <= sliderMax) {
+      handleChangeAmount(newAmount)
+    }
+  }
+
+  const handleDecrement = () => {
+    const newAmount = currentAmount - 1
+    if (newAmount >= 0) {
+      handleChangeAmount(newAmount)
+    }
+  }
+
+  const handlePayoff = () => {
+    if (payoffAmount) {
+      handleChangeAmount(payoffAmount)
+    }
+  }
+
+  const subTitle = (
+    <Box component='span'>
+      <Box component='span' css={styles.subTitle}>
+        {description1}
+      </Box>
+      {payoffAmount && (
+        <Button
+          sx={{ fontSize: '12px' }}
+          variant='text'
+          size='small'
+          onClick={handlePayoff}
+          className='choose-amount-modal-select-payoff-btn'
+        >
+          Pay Off
+        </Button>
+      )}
+    </Box>
+  )
+
+  return (
+    <WrapperModal title={title} subTitle={subTitle}>
+      {type === 'slider' && (
+        <>
+          <Box css={styles.chosenAmountWrapper}>
+            <Box css={styles.chosenAmount}>
+              {Number(currentAmount).toFixed(2)}
+              <Box component='span' css={styles.chosenAmountSymbol}>
+                {tokenSymbol}
+              </Box>
+              <Box component='span' css={styles.editIcon}>
+                <ArrowDropUpIcon
+                  onClick={handleIncrement}
+                  className='choose-amount-modal-increment-icon'
+                />
+                <ArrowDropDownIcon onClick={handleDecrement} />
+              </Box>
+            </Box>
+          </Box>
+          <Slider
+            max={sliderMax}
+            min={0}
+            css={styles.slider}
+            aria-label='Amount'
+            value={currentAmount}
+            onChange={handleSliderChange}
+          />
+        </>
+      )}
+      {type === 'input' && (
+        <Box css={styles.inputAmountWrapper}>
+          <Box css={styles.inputAmount}>
+            <Input
+              css={styles.inputField}
+              type='number'
+              value={currentAmount}
+              onChange={handleInputChange}
+            />
+            <Button
+              variant='contained'
+              css={styles.maxButton}
+              onClick={handleSetMax}
+            >
+              Max
+            </Button>
+          </Box>
+          <Box css={styles.amountAvailable}>
+            {tokenIcon && React.createElement(tokenIcon, styles.tokenIcon)}
+            <Box>{Number(sliderMax).toFixed(2)} Available</Box>
+          </Box>
+        </Box>
+      )}
+      <Box css={styles.info}>
+        <Box>{topLeft}</Box>
+        <Box>{topRight}</Box>
+      </Box>
+      {topLeft && downLeft && <Divider css={styles.divider} />}
+      <Box css={styles.info}>
+        <Box>{downLeft}</Box>
+        <Box>{downRight}</Box>
+      </Box>
+      <Box css={styles.description2}>{description2}</Box>
+      <Button
+        className='choose-amount-modal-action-btn'
+        variant='contained'
+        css={styles.okButton}
+        onClick={handleAction}
+        disabled={currentAmount === 0 || currentAmount > sliderMax}
+      >
+        {actionText.toUpperCase()}
+      </Button>
+      {!hideTerms && (
+        <Box css={styles.terms}>
+          By clicking {actionText}, you agree to Huma’s Terms of Service.
+        </Box>
+      )}
+    </WrapperModal>
+  )
+}

package/src/components/CreditLine/borrow/1-Evaluation.tsx

@@ -0,0 +1,159 @@
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { ChainEnum, PoolInfoType } from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import useEA from '../../../hooks/useEA'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
+import spinner from '../../icons/spinner.gif'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApprove: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApprove,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const { checkingEA } = useEA()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [status, setStatus] = useState<'checking' | 'success'>('checking')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && chainId) {
+        await checkingEA(
+          {
+            poolAddress: poolInfo.pool,
+            borrowerWalletAddress: account,
+            receivableAddress: poolInfo.assetAddress,
+          },
+          WIDGET_STEP.Evaluation,
+          chainId === ChainEnum.Goerli,
+        )
+        handleApprove()
+        setStatus('success')
+      }
+    }
+    fetchData()
+  }, [
+    account,
+    chainId,
+    checkingEA,
+    handleApprove,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+  ])
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+      margin-bottom: 65px;
+    `,
+    checkWrapper: css`
+      ${theme.cssMixins.rowVCentered}
+      width: 100%;
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #49505b;
+    `,
+    checkIcon: css`
+      ${theme.cssMixins.rowCentered}
+      width: 105px;
+      height: 100%;
+
+      & > img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    `,
+    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 goToNextStep = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Borrow
+      </Typography>
+      <Box css={styles.content}>
+        Looks like it’s your first time around here. Let’s see if you qualify...
+      </Box>
+      <Box css={styles.checkWrapper} sx={{ marginBottom: '16px' }}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking your income</Box>
+      </Box>
+      <Box css={styles.checkWrapper}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking other qualifications</Box>
+      </Box>
+      {status === 'success' && (
+        <>
+          <Box css={styles.congratsWrapper}>
+            <CheckCircleIcon />
+            <Box sx={{ marginLeft: '16px' }}>
+              Congrats, you are qualified to borrow
+            </Box>
+          </Box>
+          <Box css={styles.bottom}>
+            <Button variant='contained' onClick={goToNextStep}>
+              CONTINUE TO BORROW
+            </Button>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}

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

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