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

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -1,166 +1,166 @@
-import { gql, useQuery } from '@apollo/client'
-import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
-import {
-  downScale,
-  getWalletAddressAbbr,
-  PoolInfoType,
-  toBigNumber,
-} from '@huma-finance/shared'
-import { Button } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import React, { useCallback, useEffect, useState } from 'react'
-
-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,
-): ColumnType<StreamItem>[] => [
-  {
-    title: '',
-    dataIndex: 'icon',
-    width: 10,
-    style: { padding: '0 0 0 16px' },
-  },
-  { title: 'Stream', dataIndex: 'token' },
-  {
-    title: 'Payer',
-    dataIndex: 'payerAbbr',
-  },
-  { title: 'Flow rate', dataIndex: 'flowrateMonth' },
-  {
-    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 { 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: '24px' }} />,
-            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)}
-      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>
-  )
-}
+import { gql, useQuery } from '@apollo/client'
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import {
+  downScale,
+  getWalletAddressAbbr,
+  PoolInfoType,
+  toBigNumber,
+} from '@huma-finance/shared'
+import { Button } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect, useState } from 'react'
+
+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,
+): ColumnType<StreamItem>[] => [
+  {
+    title: '',
+    dataIndex: 'icon',
+    width: 10,
+    style: { padding: '0 0 0 16px' },
+  },
+  { title: 'Stream', dataIndex: 'token' },
+  {
+    title: 'Payer',
+    dataIndex: 'payerAbbr',
+  },
+  { title: 'Flow rate', dataIndex: 'flowrateMonth' },
+  {
+    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 { 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: '24px' }} />,
+            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)}
+      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

@@ -1,85 +1,85 @@
-import { Box } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  CreditEvent,
-  POOL_NAME,
-  POOL_TYPE,
-  PoolMap,
-  PoolSubgraphMap,
-  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={PoolSubgraphMap[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>
-  )
-}
+import { Box } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditEvent,
+  POOL_NAME,
+  POOL_TYPE,
+  PoolMap,
+  PoolSubgraphMap,
+  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={PoolSubgraphMap[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

@@ -1,85 +1,85 @@
-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
-  buttonText?: string
-}
-
-export function TxDoneModal({
-  content,
-  handleAction,
-  buttonText,
-}: 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}
-      >
-        {buttonText == null ? 'DONE' : buttonText}
-      </Button>
-    </Box>
-  )
-}
+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
+  buttonText?: string
+}
+
+export function TxDoneModal({
+  content,
+  handleAction,
+  buttonText,
+}: 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}
+      >
+        {buttonText == null ? 'DONE' : buttonText}
+      </Button>
+    </Box>
+  )
+}