@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.279

package/src/components/ReceivableBackedCreditLine/payment/1-ChoosePaymentType.tsx

@@ -0,0 +1,115 @@
+import {
+  css,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+import { PaymentType } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  paymentType: PaymentType | undefined
+  changePaymentType: (paymentType: PaymentType) => void
+}
+
+export function ChoosePaymentType({
+  paymentType,
+  changePaymentType,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    subTitle: css`
+      color: ${theme.palette.text.primary} !important;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(5)};
+      margin-left: ${theme.spacing(2)};
+    `,
+    radioGroup: css`
+      margin-left: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    formControl: css`
+      margin-bottom: ${theme.spacing(1)};
+      .MuiFormControlLabel-label {
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Regular';
+        font-size: 16px;
+        line-height: 150%;
+        letter-spacing: 0.15px;
+      }
+    `,
+  }
+
+  const handleNext = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  const items: {
+    label: string
+    value: PaymentType
+  }[] = [
+    {
+      label: 'Payment with Receivable',
+      value: PaymentType.PaymentWithReceivable,
+    },
+    {
+      label: 'Payment with Receivable and Drawdown',
+      value: PaymentType.PaymentWithReceivableAndDrawdown,
+    },
+  ]
+
+  return (
+    <WrapperModal title='Pay'>
+      <FormControl>
+        <FormLabel css={styles.subTitle}>Select Payment Type</FormLabel>
+        <RadioGroup
+          aria-labelledby='buttons-group-label'
+          name='radio-buttons-group'
+          css={styles.radioGroup}
+          onChange={(e) =>
+            changePaymentType(Number(e.target.value) as PaymentType)
+          }
+        >
+          {items.map((item) => (
+            <FormControlLabel
+              key={item.label}
+              value={item.value}
+              control={
+                <Radio
+                  sx={{
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 24,
+                    },
+                  }}
+                />
+              }
+              label={item.label}
+              css={styles.formControl}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      <BottomButton
+        variant='contained'
+        disabled={paymentType === undefined}
+        onClick={handleNext}
+      >
+        NEXT
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/2-ChooseAmount.tsx

@@ -0,0 +1,84 @@
+import {
+  PoolInfoV2,
+  toBigNumber,
+  UnderlyingTokenInfo,
+  upScale,
+  usePoolSafeAllowanceV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useCallback, useState } from 'react'
+
+import { PaymentType } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  payoffAmount: BigNumber
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  paymentType: PaymentType
+}
+
+export function ChooseAmount({
+  payoffAmount: payoffAmountBN,
+  poolInfo,
+  poolUnderlyingToken,
+  paymentType,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { allowance } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const payoffAmount = Number(
+    ethers.utils.formatUnits(payoffAmountBN, decimals),
+  )
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      dispatch(setPaymentAmount({ paymentAmount: newAmount }))
+    },
+    [dispatch],
+  )
+
+  const handleAction = useCallback(() => {
+    const payAmount = upScale(currentAmount, decimals)
+    if (toBigNumber(payAmount).gt(allowance!)) {
+      dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+      return
+    }
+
+    const step =
+      paymentType === PaymentType.PaymentWithReceivable
+        ? WIDGET_STEP.Transfer
+        : WIDGET_STEP.MintNFT
+    dispatch(setStep(step))
+  }, [allowance, currentAmount, decimals, dispatch, paymentType])
+
+  if (!allowance) {
+    return <LoadingModal title='Pay' />
+  }
+
+  return (
+    <ChooseAmountModal
+      title='Pay'
+      description1='Choose amount'
+      sliderMax={payoffAmount}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='pay'
+      hideTerms
+    />
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/3-ApproveAllowance.tsx

@@ -0,0 +1,41 @@
+import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { PaymentType } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  paymentType: PaymentType
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  poolUnderlyingToken,
+  paymentType,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    const step =
+      paymentType === PaymentType.PaymentWithReceivable
+        ? WIDGET_STEP.Transfer
+        : WIDGET_STEP.MintNFT
+
+    dispatch(setStep(step))
+  }, [dispatch, paymentType])
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.poolSafe}
+      poolUnderlyingToken={poolUnderlyingToken}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/4-CreateReceivable.tsx

@@ -0,0 +1,107 @@
+import { HumaContext, HumaReceivableFactory } from '@huma-finance/sdk'
+import {
+  CURRENCY_CODE,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { ContractReceipt, ethers } from 'ethers'
+import moment from 'moment'
+import React, { useCallback, useEffect, useState } 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'
+import { LoadingModal } from '../../LoadingModal'
+import { ViewOnExplorer } from '../../ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  setTokenId: (tokenId: string) => void
+}
+
+export function CreateReceivable({
+  poolInfo,
+  poolUnderlyingToken,
+  setTokenId,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider, chainId } = useWeb3React()
+  const { paymentAmount } = useAppSelector(selectWidgetState)
+  const [txHash, setTxHash] = useState('')
+
+  const getTokenIdFromReceipt = useCallback((txReceipt: ContractReceipt) => {
+    if (!Array.isArray(txReceipt.events)) {
+      return undefined
+    }
+    const event = txReceipt.events.find(
+      (event) => event.event === 'ReceivableCreated',
+    )
+    if (!event || !event.args!! || !event.args?.tokenId) {
+      return undefined
+    }
+    return event.args.tokenId.toString() as string
+  }, [])
+
+  useEffect(() => {
+    const sendTx = async () => {
+      if (provider && chainId) {
+        try {
+          const humaContext = new HumaContext({
+            signer: provider.getSigner(),
+            provider,
+            chainId,
+            poolName: poolInfo.poolName,
+            poolType: poolInfo.poolType,
+          })
+          const receivableFactory = new HumaReceivableFactory({
+            humaContext,
+          })
+          const receivableAmountBN = ethers.utils.parseUnits(
+            String(paymentAmount),
+            poolUnderlyingToken.decimals,
+          )
+          const maturityDate = moment().add(1, 'months').unix()
+          const tx = await receivableFactory.createReceivable(
+            CURRENCY_CODE.USD,
+            receivableAmountBN,
+            maturityDate,
+            '',
+          )
+          setTxHash(tx.hash)
+          const txReceipt = await tx.wait()
+          const tokenId = getTokenIdFromReceipt(txReceipt)
+          if (tokenId) {
+            setTokenId(tokenId)
+          }
+          dispatch(setStep(WIDGET_STEP.ApproveNFT))
+        } catch (e) {
+          console.log(e)
+          dispatch(setStep(WIDGET_STEP.Error))
+        }
+      }
+    }
+    sendTx()
+  }, [
+    chainId,
+    dispatch,
+    getTokenIdFromReceipt,
+    paymentAmount,
+    poolInfo.poolName,
+    poolInfo.poolType,
+    poolUnderlyingToken.decimals,
+    provider,
+    setTokenId,
+  ])
+
+  return (
+    <LoadingModal
+      title='Create Receivable'
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/5-ApproveReceivable.tsx

@@ -0,0 +1,64 @@
+import {
+  PoolInfoV2,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  useReceivableContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useEffect } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+import { ViewOnExplorer } from '../../ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  tokenId: string
+}
+
+export function ApproveReceivable({
+  poolInfo,
+  tokenId,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider, account } = useWeb3React()
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const reset = useResetAtom(txAtom)
+  const receivableContract = useReceivableContractV2(
+    poolInfo.poolName,
+    provider,
+    account,
+  )
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      reset()
+      dispatch(setStep(WIDGET_STEP.Transfer))
+    }
+  }, [dispatch, reset, state])
+
+  useEffect(() => {
+    if (receivableContract) {
+      send({
+        contract: receivableContract,
+        method: 'approve',
+        params: [poolInfo.poolCredit, tokenId],
+        provider,
+      })
+    }
+  }, [poolInfo.poolCredit, provider, receivableContract, send, tokenId])
+
+  return (
+    <LoadingModal
+      title='Approve Receivable'
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/6-Transfer.tsx

@@ -0,0 +1,107 @@
+import { TransactionResponse } from '@ethersproject/providers'
+import {
+  makePaymentWithReceivable,
+  makePrincipalPaymentAndDrawdownWithReceivable,
+} from '@huma-finance/sdk'
+import {
+  PoolInfoV2,
+  toBigNumber,
+  UnderlyingTokenInfo,
+  upScale,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
+import React, { useEffect, useState } from 'react'
+
+import { PaymentType } from '.'
+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'
+import { LoadingModal } from '../../LoadingModal'
+import { ViewOnExplorer } from '../../ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  paymentType: PaymentType
+  paymentTokenId: string
+  borrowTokenId?: string
+  setSuccessTxReceipt: (txReceipt: ethers.ContractReceipt) => void
+}
+
+export function Transfer({
+  poolInfo,
+  poolUnderlyingToken,
+  paymentType,
+  paymentTokenId,
+  borrowTokenId,
+  setSuccessTxReceipt,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { paymentAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolUnderlyingToken
+  const paymentAmountBN = toBigNumber(
+    upScale(paymentAmount!, decimals),
+  ).toString()
+  const [txHash, setTxHash] = useState('')
+
+  useEffect(() => {
+    const sendTx = async () => {
+      if (provider) {
+        try {
+          let tx: TransactionResponse
+          if (paymentType === PaymentType.PaymentWithReceivable) {
+            tx = await makePaymentWithReceivable(
+              provider.getSigner(),
+              poolInfo.poolName,
+              paymentTokenId,
+              paymentAmountBN,
+              false,
+            )
+          } else {
+            tx = await makePrincipalPaymentAndDrawdownWithReceivable(
+              provider.getSigner(),
+              poolInfo.poolName,
+              paymentTokenId,
+              paymentAmountBN,
+              borrowTokenId!,
+              paymentAmountBN,
+            )
+          }
+          setTxHash(tx.hash)
+          const txReceipt = await tx.wait()
+          setSuccessTxReceipt(txReceipt)
+          dispatch(setStep(WIDGET_STEP.Done))
+        } catch (e) {
+          console.error(e)
+          dispatch(setStep(WIDGET_STEP.Error))
+        }
+      }
+    }
+    sendTx()
+  }, [
+    borrowTokenId,
+    dispatch,
+    paymentAmountBN,
+    paymentTokenId,
+    paymentType,
+    poolInfo.poolName,
+    provider,
+    setSuccessTxReceipt,
+  ])
+
+  if (!account) {
+    return <LoadingModal title='Pay' />
+  }
+
+  return (
+    <LoadingModal
+      title='Transaction Pending'
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ReceivableBackedCreditLine/payment/7-Success.tsx

@@ -0,0 +1,49 @@
+import {
+  decodeLogs,
+  downScale,
+  formatMoney,
+  TRANSFER_ABI,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import React, { useEffect, useState } from 'react'
+
+import { PaymentType } from '.'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  paymentType: PaymentType
+  successTxReceipt: ethers.ContractReceipt
+  handleAction: () => void
+}
+
+export function Success({
+  poolUnderlyingToken,
+  paymentType,
+  successTxReceipt,
+  handleAction,
+}: Props): React.ReactElement {
+  const { symbol, decimals } = poolUnderlyingToken
+  const [paidAmount, setPaidAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (successTxReceipt) {
+      const [event] = decodeLogs(successTxReceipt.logs, TRANSFER_ABI)
+      if (event) {
+        const paidAmount = downScale(event.args.value.toString(), decimals)
+        setPaidAmount(paidAmount)
+      }
+    }
+  }, [decimals, successTxReceipt])
+
+  const amoutFormatted = formatMoney(paidAmount)
+  const content =
+    paymentType === PaymentType.PaymentWithReceivable
+      ? [`You successfully paid ${amoutFormatted} ${symbol}.`]
+      : [
+          `You successfully paid ${amoutFormatted} ${symbol} and borrowed ${amoutFormatted} ${symbol}.`,
+        ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}