@huma-finance/widgets 0.0.37 → 0.0.38-beta.0

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

@@ -1,54 +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'
-    />
-  )
-}
+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

@@ -1,23 +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} />
-}
+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

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

@@ -1,66 +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>
-  )
-}
+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

@@ -1,69 +1,69 @@
-import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
-import { AccountStats, PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback } 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',
-    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 {
-  const setItem = useCallback(
-    () =>
-      Promise.resolve({
-        name: poolInfo?.extra?.superTokens?.[0].symbol ?? '',
-      }),
-    [poolInfo?.extra?.superTokens],
-  )
-
-  return (
-    <FactoredList
-      title='Streams'
-      poolInfo={poolInfo}
-      loading={loading}
-      handlePayManually={handlePayManually}
-      getColumns={getColumns}
-      accountStats={accountStats}
-      setItem={setItem}
-    />
-  )
-}
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import { AccountStats, PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback } 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',
+    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 {
+  const setItem = useCallback(
+    () =>
+      Promise.resolve({
+        name: poolInfo?.extra?.superTokens?.[0].symbol ?? '',
+      }),
+    [poolInfo?.extra?.superTokens],
+  )
+
+  return (
+    <FactoredList
+      title='Streams'
+      poolInfo={poolInfo}
+      loading={loading}
+      handlePayManually={handlePayManually}
+      getColumns={getColumns}
+      accountStats={accountStats}
+      setItem={setItem}
+    />
+  )
+}