@huma-finance/widgets 0.0.6-alpha.0

package/src/components/StreamFactoring/borrow/index.tsx

@@ -0,0 +1,95 @@
+import { useWeb3React } from '@web3-react/core'
+import { POOL_NAME, POOL_TYPE, usePoolInfo } from '@huma-finance/shared'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { Evaluation } from './1-Evaluation'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ConfirmTransfer } from './3-ConfirmTransfer'
+import { ApproveAllowance } from './4-ApproveAllowance'
+import { Permit } from './5-Permit'
+import { Transfer } from './6-Transfer'
+import { Success } from './7-Success'
+
+export type StreamFactoringBorrowProps = {
+  poolName: POOL_NAME
+  poolType: POOL_TYPE
+  payerAddress: string
+  superToken: string
+  currentFlowRate: string
+  isOpen: boolean
+  handleClose: () => void
+  handleSuccess: (blockNumber: number) => void
+}
+
+export function StreamFactoringBorrow({
+  poolName,
+  poolType,
+  payerAddress,
+  superToken,
+  currentFlowRate,
+  isOpen,
+  handleClose,
+  handleSuccess,
+}: StreamFactoringBorrowProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account, chainId } = useWeb3React()
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.Evaluation))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen={isOpen}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation
+          poolInfo={poolInfo}
+          payerAddress={payerAddress}
+          superToken={superToken}
+          currentFlowRate={currentFlowRate}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} currentFlowRate={currentFlowRate} />
+      )}
+      {step === WIDGET_STEP.ConfirmTransfer && <ConfirmTransfer />}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Permit && account && chainId && (
+        <Permit
+          poolInfo={poolInfo}
+          payerAddress={payerAddress}
+          chainId={chainId}
+          borrower={account}
+          superToken={superToken}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Stream Borrowing'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/StreamFactoring/payment/ChooseAmount.tsx

@@ -0,0 +1,54 @@
+import { CreditRecordType, downScale, PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  creditRecord: CreditRecordType
+  poolInfo: PoolInfoType
+}
+
+export function ChooseAmount({
+  creditRecord,
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
+  const totalDue = downScale<number>(creditRecord.totalDue.toString(), decimals)
+  const [remainingDue, setRemainingDue] = useState(totalDue)
+  const [currentAmount, setCurrentAmount] = useState(0)
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      const remainDueAmount = totalDue - newAmount
+      setRemainingDue(remainDueAmount)
+      dispatch(setPaymentAmount({ paymentAmount: newAmount, remainDueAmount }))
+    },
+    [dispatch, totalDue],
+  )
+
+  const handleAction = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ChooseAmountModal
+      title='Make the payment'
+      description1='Choose amount'
+      sliderMax={totalDue}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      topLeft='Total Due'
+      topRight={`${totalDue} ${symbol}`}
+      downLeft='Remaining Due'
+      downRight={`${remainingDue} ${symbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='make payment'
+    />
+  )
+}

package/src/components/StreamFactoring/payment/Success.tsx

@@ -0,0 +1,23 @@
+import { PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { symbol } = poolInfo.poolUnderlyingToken
+  const { paymentAmount, remainDueAmount } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `You have successfully made a payment of ${paymentAmount} ${symbol}.`,
+    `The remaining due amount is ${remainDueAmount} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/StreamFactoring/payment/Transfer.tsx

@@ -0,0 +1,34 @@
+import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
+import React, { useCallback } 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 { TxSendModal } from '../../TxSendModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function Transfer({ poolInfo }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const { decimals } = poolInfo.poolUnderlyingToken
+  const { paymentAmount } = useAppSelector(selectWidgetState)
+  const paymentBigNumber = toBigNumber(upScale(paymentAmount!, decimals))
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='makePayment'
+      params={[account, paymentBigNumber]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/StreamFactoring/payment/index.tsx

@@ -0,0 +1,66 @@
+import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType, useAccountStats } from '@huma-finance/shared'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ChooseAmount } from './ChooseAmount'
+import { Success } from './Success'
+import { Transfer } from './Transfer'
+
+type Props = {
+  poolInfo: PoolInfoType
+  isOpen: boolean
+  handleClose: () => void
+  handleSuccess: (blockNumber: number) => void
+}
+
+export function StreamFactoringPayment({
+  poolInfo,
+  isOpen,
+  handleClose,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [{ creditRecord }] = useAccountStats(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    account,
+  )
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }, [dispatch])
+
+  return (
+    <WidgetWrapper
+      isOpen={isOpen}
+      isLoading={!creditRecord}
+      loadingTitle='Payment'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount creditRecord={creditRecord!} poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Make Payment'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/SuperfluidFactoring/SuperfluidFactoredList.tsx

@@ -0,0 +1,61 @@
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import { AccountStats, PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { ColumnType } from '../../utilTypes'
+import { FactoredList } from '../Factoring'
+
+type FactoredStreamType = {
+  id: string
+  icon: EmotionJSX.Element
+  name: string
+  payer: string
+  amount?: string | number
+  factored?: string | number
+  token: string
+  tokenId: string
+  flowrate: string
+  flowrateMonth: string
+  due?: string
+  remained?: string | number
+}
+
+type Props = {
+  poolInfo: PoolInfoType
+  loading: boolean
+  accountStats: AccountStats
+  handlePayManually: (item: FactoredStreamType) => void
+}
+
+const getColumns = (): ColumnType<FactoredStreamType>[] => [
+  {
+    title: '',
+    dataIndex: 'icon',
+    noSeparator: true,
+    width: 10,
+    style: { padding: '0 0 0 16px' },
+  },
+  { title: 'Streams', dataIndex: 'name' },
+  { title: 'Due', dataIndex: 'due' },
+  { title: 'Amount', dataIndex: 'amount' },
+  { title: 'Factored', dataIndex: 'factored' },
+  { title: 'Remaining', dataIndex: 'remained' },
+]
+
+export function SuperfluidFactoredList({
+  poolInfo,
+  loading,
+  accountStats,
+  handlePayManually,
+}: Props): React.ReactElement {
+  return (
+    <FactoredList
+      title='Streams'
+      poolInfo={poolInfo}
+      loading={loading}
+      handlePayManually={handlePayManually}
+      getColumns={getColumns}
+      accountStats={accountStats}
+    />
+  )
+}

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -0,0 +1,185 @@
+import { gql, useQuery } from '@apollo/client'
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import { Button } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { History } from 'history'
+import {
+  downScale,
+  getWalletAddressAbbr,
+  PoolInfoType,
+  toBigNumber,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useHistory } from 'react-router'
+
+import { ColumnType } from '../../utilTypes'
+import { TableActionButton } from '../buttons'
+import { UpcomingList } from '../Factoring'
+import { ReceiptIcon } from '../icons'
+
+const GET_RECEIVED_STREAMS = gql`
+  query GetReceivedStreams($receiver: String!, $tokenIds: [String]!) {
+    streams(
+      where: { receiver: $receiver, token_in: $tokenIds, currentFlowRate_gt: 0 }
+      orderBy: updatedAtTimestamp
+      orderDirection: desc
+    ) {
+      id
+      currentFlowRate
+      sender {
+        id
+      }
+      token {
+        id
+        symbol
+        decimals
+      }
+    }
+  }
+`
+
+export type StreamItem = {
+  id: string
+  icon: EmotionJSX.Element
+  token: string
+  tokenId: string
+  payer: string
+  flowrate: string
+  flowrateMonth: string
+}
+
+type Stream = {
+  id: string
+  currentFlowRate: string
+  sender: {
+    id: string
+  }
+  token: {
+    id: string
+    symbol: string
+    decimals: number
+  }
+}
+
+type Props = {
+  hasActiveLoan: boolean
+  poolInfo?: PoolInfoType
+  loading: boolean
+  handleGetPaid: (item: StreamItem) => void
+}
+
+const getUpcomingColumns = (
+  userHasActiveLoan: boolean,
+  handleGetPaid: (id: StreamItem) => void,
+  history: History,
+): ColumnType<StreamItem>[] => [
+  {
+    title: '',
+    dataIndex: 'icon',
+    noSeparator: true,
+    width: 10,
+    style: { padding: '0 0 0 16px' },
+  },
+  { title: 'Stream', dataIndex: 'token' },
+  {
+    title: 'Payer',
+    dataIndex: 'payerAbbr',
+  },
+  { title: 'Flow rate', dataIndex: 'flowrateMonth' },
+  {
+    title: 'Payer Approve',
+    action: (record) => (
+      <TableActionButton
+        title='Go To Approve'
+        handleClick={() =>
+          history.push(
+            `/superfluid?payer=${record.payer}&superToken=${record.tokenId}`,
+          )
+        }
+        disabled={userHasActiveLoan}
+      />
+    ),
+  },
+  {
+    title: 'Get Paid',
+    action: (record) => (
+      <TableActionButton
+        title='GET PAID NOW'
+        handleClick={() => handleGetPaid(record)}
+        disabled={userHasActiveLoan}
+      />
+    ),
+  },
+]
+
+export function SuperfluidUpcomingList({
+  hasActiveLoan,
+  poolInfo,
+  loading,
+  handleGetPaid,
+}: Props): React.ReactElement {
+  const history = useHistory()
+  const { account, isActive } = useWeb3React()
+  const [streams, setStreams] = useState<StreamItem[] | undefined>()
+  const { data } = useQuery<{ streams: Stream[] }>(GET_RECEIVED_STREAMS, {
+    variables: {
+      receiver: account ? account.toLowerCase() : undefined,
+      tokenIds: poolInfo?.extra?.superTokens.map((item) => item.id) ?? [],
+    },
+  })
+
+  useEffect(() => {
+    if (data?.streams?.length) {
+      let result: Array<StreamItem | undefined> = data.streams.map((item) => {
+        const ONE_MONTH_SECONDS = 30 * 24 * 60 * 60
+        const flowrateMonth = downScale(
+          toBigNumber(item.currentFlowRate).mul(ONE_MONTH_SECONDS),
+          item.token.decimals,
+        )
+        if (Number(Number(flowrateMonth).toFixed(0)) > 0) {
+          return {
+            id: item.id,
+            icon: <ReceiptIcon css={{ width: '18px' }} />,
+            token: item.token.symbol,
+            tokenId: item.token.id,
+            payer: item.sender.id,
+            payerAbbr: getWalletAddressAbbr(item.sender.id),
+            flowrate: item.currentFlowRate,
+            flowrateMonth: `${Number(flowrateMonth).toFixed(0)}/mo`,
+          }
+        }
+        return undefined
+      })
+      result = result.filter((item) => !!item)
+      setStreams(result as StreamItem[])
+    }
+  }, [data])
+
+  const goToCreateStream = useCallback(() => {}, [])
+
+  return (
+    <UpcomingList<StreamItem>
+      items={streams}
+      loading={loading}
+      columns={getUpcomingColumns(hasActiveLoan, handleGetPaid, history)}
+      title='Ongoing Streams'
+      connectWalletDesc='Please connect wallet to check your ongoing streams.'
+      noItemDesc='You don’t have any ongoing streams eligible for factoring. For now, you can click the button
+      below to create streams.'
+    >
+      {isActive && (
+        <Button
+          onClick={goToCreateStream}
+          type='link'
+          size='small'
+          variant='contained'
+          sx={{ marginTop: '20px' }}
+          href='https://app.superfluid.finance/'
+          target='_blank'
+        >
+          CREATE STREAM
+        </Button>
+      )}
+    </UpcomingList>
+  )
+}

package/src/components/SuperfluidFactoring/index.tsx

@@ -0,0 +1,85 @@
+import { Box } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditEvent,
+  POOL_NAME,
+  POOL_TYPE,
+  PoolContractMap,
+  PoolMap,
+  useFactoring,
+} from '@huma-finance/shared'
+import React from 'react'
+
+import { Activity } from '../Activity'
+import { ApolloWrapper } from '../ApolloWrapper'
+import { StreamFactoringBorrow } from '../StreamFactoring/borrow'
+import { SuperfluidFactoredList } from './SuperfluidFactoredList'
+import { StreamItem, SuperfluidUpcomingList } from './SuperfluidUpcomingList'
+
+export function SuperfluidFactoring(): React.ReactElement {
+  const poolName = POOL_NAME.Superfluid
+  const { chainId } = useWeb3React()
+  const {
+    accountStats,
+    accountHasActiveLoan,
+    actionType,
+    loading,
+    poolInfo,
+    modalIsOpen,
+    selectedItem,
+    styles,
+    handleGetPaid,
+    handleGetPaidSuccess,
+    handlePayManually,
+    handleClose,
+  } = useFactoring<StreamItem>(poolName, POOL_TYPE.Stream)
+
+  return (
+    <Box css={styles.wrapper}>
+      <Box css={styles.title}>Stream Factoring</Box>
+      <Box css={styles.description} marginBottom='47px'>
+        {PoolMap.Stream[poolName].borrowDesc}
+      </Box>
+      {poolInfo && (
+        <SuperfluidFactoredList
+          poolInfo={poolInfo}
+          handlePayManually={handlePayManually}
+          loading={loading && actionType === 'payment'}
+          accountStats={accountStats}
+        />
+      )}
+      <ApolloWrapper uri={poolInfo?.extra?.subgraph!}>
+        <SuperfluidUpcomingList
+          poolInfo={poolInfo}
+          handleGetPaid={handleGetPaid}
+          hasActiveLoan={accountHasActiveLoan}
+          loading={loading && actionType === 'borrow'}
+        />
+      </ApolloWrapper>
+      <ApolloWrapper uri={PoolContractMap[chainId!]?.subgraph}>
+        {poolInfo && (
+          <Activity
+            poolInfo={poolInfo}
+            targetEvents={[
+              CreditEvent.DrawdownMadeWithReceivable,
+              CreditEvent.PaymentMade,
+              CreditEvent.ReceivedPaymentProcessed,
+            ]}
+          />
+        )}
+      </ApolloWrapper>
+      {poolInfo && selectedItem && actionType === 'borrow' && (
+        <StreamFactoringBorrow
+          poolName={POOL_NAME.Superfluid}
+          poolType={POOL_TYPE.Stream}
+          payerAddress={selectedItem.payer}
+          superToken={selectedItem.tokenId}
+          currentFlowRate={selectedItem.flowrate}
+          isOpen={modalIsOpen}
+          handleClose={handleClose}
+          handleSuccess={handleGetPaidSuccess}
+        />
+      )}
+    </Box>
+  )
+}

package/src/components/TxDoneModal.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { CheckIcon } from './icons'
+
+type Props = {
+  content: string[]
+  handleAction: () => void
+}
+
+export function TxDoneModal({
+  content,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.colVCentered};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 18px;
+      color: #423b46;
+      margin-top: 64px;
+      text-align: center;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 82px;
+    `,
+    doneButton: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleAction()
+  }, [dispatch, handleAction, reset])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Transaction Completed
+      </Typography>
+      <Box css={styles.check}>
+        <CheckIcon />
+      </Box>
+      <Box css={styles.content}>
+        {content.map((item) => (
+          <Box sx={{ marginTop: '10px' }} key={item}>
+            {item}
+          </Box>
+        ))}
+      </Box>
+      <Button
+        className='transaction-done-modal-close-btn'
+        variant='contained'
+        css={styles.doneButton}
+        onClick={handleCloseModal}
+      >
+        DONE
+      </Button>
+    </Box>
+  )
+}