@huma-finance/widgets 0.0.62-beta.624 → 0.0.62-beta.630

package/src/components/HumaTable.tsx

@@ -1,203 +0,0 @@
-import { Box, css, Skeleton, TablePagination, useTheme } from '@mui/material'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableContainer from '@mui/material/TableContainer'
-import TableHead from '@mui/material/TableHead'
-import TableRow from '@mui/material/TableRow'
-import * as React from 'react'
-
-import { useElementDimensions } from '../hooks/useElementDimensions'
-import { ColumnType } from '../utilTypes'
-import { SeparatorIcon } from './icons'
-
-type Props<T> = {
-  columns: ColumnType<T>[]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rows?: any[]
-  hideRowsPerPage?: boolean
-}
-
-// @TODO: Move HumaTable along with Superfluid widget to Dapp package
-export function HumaTable<T>({
-  columns,
-  rows,
-  hideRowsPerPage = false,
-}: Props<T>): React.ReactElement | null {
-  const theme = useTheme()
-  const ref = React.useRef()
-  const [page, setPage] = React.useState(0)
-  const [rowsPerPage, setRowsPerPage] = React.useState(5)
-  const noPagination = rows ? rows.length <= 5 : true
-  const rowPerPageOptions = hideRowsPerPage ? [] : [5, 10, 25]
-  const { width } = useElementDimensions(ref)
-  const isLoading = !columns || !rows
-
-  const styles = {
-    tableHeader: css`
-      font-weight: 400;
-      ${theme.cssMixins.rowVCentered}
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.87);
-    `,
-    tableBody: css`
-      font-weight: 400;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.87);
-    `,
-    empty: css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-top: ${theme.spacing(2)};
-      font-weight: 400;
-      font-size: 14px;
-    `,
-  }
-
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage)
-  }
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10))
-    setPage(0)
-  }
-
-  const getTableHeader = () => (
-    <TableHead>
-      <TableRow>
-        {columns.map((column, index) => (
-          <TableCell key={column.title} width={column.width}>
-            <Box css={styles.tableHeader}>
-              {index !== 0 && <SeparatorIcon />}
-              <Box component='span' sx={{ marginLeft: index ? '12px' : '0' }}>
-                {column.title}
-              </Box>
-            </Box>
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  )
-
-  if (isLoading) {
-    return (
-      <Box ref={ref}>
-        <Box sx={{ width }}>
-          <Skeleton />
-          <Skeleton />
-          <Skeleton />
-        </Box>
-      </Box>
-    )
-  }
-
-  if (rows.length === 0) {
-    return (
-      <TableContainer>
-        <Table aria-label='simple table'>{getTableHeader()}</Table>
-        <Box css={styles.empty}>
-          <Box>No Data</Box>
-        </Box>
-      </TableContainer>
-    )
-  }
-
-  return (
-    <>
-      <TableContainer>
-        <Table aria-label='simple table'>
-          {getTableHeader()}
-          <TableBody>
-            {rows
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row) => (
-                <TableRow key={row.id || row.name}>
-                  {columns.map((column, index) => (
-                    <TableCell
-                      // eslint-disable-next-line react/no-array-index-key
-                      key={`${column.dataIndex}-${index}`}
-                      component='th'
-                      scope='row'
-                      css={styles.tableBody}
-                      width={column.width}
-                      sx={column.style}
-                    >
-                      {column.dataIndex && (
-                        <Box
-                          component='span'
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginLeft: theme.spacing(index ? 1 : 0),
-                          }}
-                        >
-                          {row[column.dataIndex]}
-                        </Box>
-                      )}
-                      {column.action && (
-                        <Box
-                          component='span'
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginLeft: theme.spacing(index ? 1 : 0),
-                            lineHeight: 0,
-                            height: 0,
-                          }}
-                        >
-                          {column.action(row)}
-                        </Box>
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      {!noPagination && (
-        <TablePagination
-          size='small'
-          sx={{
-            '.MuiTablePagination-selectLabel': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-select': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-displayedRows': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-menuItem': {
-              fontSize: '14px',
-            },
-          }}
-          rowsPerPageOptions={rowPerPageOptions}
-          component='div'
-          count={rows ? rows.length : 0}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          SelectProps={{
-            MenuProps: {
-              sx: {
-                '.MuiTablePagination-menuItem': {
-                  padding: theme.spacing(1, 0),
-                  display: 'flex',
-                  justifyContent: 'center',
-                  fontSize: '14px',
-                  lineHeight: '1.2',
-                },
-              },
-            },
-          }}
-        />
-      )}
-    </>
-  )
-}

package/src/components/SuperfluidFactoring/SuperfluidFactoredList.tsx

@@ -1,69 +0,0 @@
-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?.superToken?.symbol ?? '',
-      }),
-    [poolInfo?.extra?.superToken],
-  )
-
-  return (
-    <FactoredList
-      title='Streams'
-      poolInfo={poolInfo}
-      loading={loading}
-      handlePayManually={handlePayManually}
-      getColumns={getColumns}
-      accountStats={accountStats}
-      setItem={setItem}
-    />
-  )
-}

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -1,169 +0,0 @@
-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, useTheme } 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 theme = useTheme()
-  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?.superToken
-        ? [poolInfo.extra.superToken.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: theme.spacing(2) }}
-          href='https://app.superfluid.finance/'
-          target='_blank'
-        >
-          CREATE STREAM
-        </Button>
-      )}
-    </UpcomingList>
-  )
-}