@huma-finance/widgets 0.0.62-beta.627 → 0.0.62-beta.631

package/src/hooks/useNotifi.ts

@@ -8,6 +8,11 @@ import {
   NotifiFrontendClient,
   newFrontendClient,
 } from '@notifi-network/notifi-frontend-client'
+import {
+  FtuStage,
+  useNotifiFrontendClientContext,
+  useNotifiUserSettingContext,
+} from '@notifi-network/notifi-react'
 
 export const useDoesChainSupportNotifi = (chainId: number | undefined) => {
   const [notifiChainSupported, setNotifiChainSupported] = useState(false)
@@ -54,32 +59,31 @@ export const useNotifiClient = (
   return { notifiClient }
 }
 
+// Check if user is authenticated
+// If not authenticated or expired, have user login
+// After login, check FTU stage
+// If FTU stage is not Done, go to signup flow. Otherwise, skip to next step
+
 export const useIsFirstTimeNotifiUser = (
   account: string | undefined,
   chainId: number | undefined,
 ) => {
   const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
-  const { notifiClient } = useNotifiClient(account, chainId)
+  const {
+    frontendClientStatus: { isInitialized, isAuthenticated, isExpired },
+  } = useNotifiFrontendClientContext()
+  const { ftuStage, isLoading: isLoadingFtu } = useNotifiUserSettingContext()
   const { notifiChainSupported } = useDoesChainSupportNotifi(chainId)
 
   useEffect(() => {
     const checkIsFirstTimeNotifiUser = async () => {
-      if (notifiClient != null && notifiChainSupported) {
-        const { userState } = notifiClient
-        // If the user is not authenticated or expired, they are a first time user
-        if (
-          userState == null ||
-          (userState.status !== 'authenticated' &&
-            userState.status !== 'expired')
-        ) {
+      if (isInitialized && notifiChainSupported) {
+        // If the user is not authenticated or expired, they are possibly a first time user.
+        if (!isAuthenticated || isExpired) {
           setIsFirstTimeNotifiUser(true)
-        } else if (userState.status === 'authenticated') {
-          // If a user is authenticated, check if they have a target group (AKA email)
-          // associated with their wallet. If they do not, show them the notifi onboarding flow.
-          const targetGroups = await notifiClient.getTargetGroups()
-          const emailTargets = targetGroups[0]?.emailTargets?.[0]
-
-          if (emailTargets == null || emailTargets.emailAddress == null) {
+        } else if (isAuthenticated) {
+          // If a user is authenticated, check if they've completed all the FTU (First Time User) stages.
+          if (ftuStage !== FtuStage.Done) {
             setIsFirstTimeNotifiUser(true)
           }
         }
@@ -87,7 +91,14 @@ export const useIsFirstTimeNotifiUser = (
     }
 
     checkIsFirstTimeNotifiUser()
-  }, [notifiChainSupported, notifiClient])
+  }, [
+    ftuStage,
+    isAuthenticated,
+    isExpired,
+    isInitialized,
+    isLoadingFtu,
+    notifiChainSupported,
+  ])
 
   return { isFirstTimeNotifiUser }
 }

package/src/index.tsx

@@ -93,6 +93,7 @@ import {
   SolanaPayment,
   SolanaPaymentProps,
 } from './components/CreditLine/solanaPayment'
+import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -136,7 +137,11 @@ function Widget(props: WCProps<WidgetProps>) {
       <ReduxProvider store={store}>
         <Web3Provider {...(props as Web3Props)} defaultChainId={chainId}>
           <AtomProvider>
-            <ChainSupportProvider>{children}</ChainSupportProvider>
+            <ChainSupportProvider>
+              <NotifiContextWrapper chainId={chainId}>
+                {children}
+              </NotifiContextWrapper>
+            </ChainSupportProvider>
           </AtomProvider>
         </Web3Provider>
       </ReduxProvider>
@@ -667,3 +672,5 @@ export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
     </SolanaWidget>
   )
 }
+
+export * from './components/Notifi/NotifiContextWrapper'

package/src/theme/coreThemeConstants.ts

@@ -3,7 +3,7 @@ export const coreThemeConstants = {
     md: 4,
   },
   fontFamily: [
-    'Roboto',
+    'Red-Hat-Display',
     '-apple-system',
     'BlinkMacSystemFont',
     '"Segoe UI"',

package/src/components/Activity.tsx

@@ -1,128 +0,0 @@
-import { gql, useQuery } from '@apollo/client'
-import {
-  CreditEvent,
-  CreditEventText,
-  downScale,
-  isEmpty,
-  PoolInfoType,
-  timeUtil,
-} from '@huma-finance/shared'
-import { useMQ } from '@huma-finance/web-shared'
-import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { useEffect, useState } from 'react'
-
-import { HumaTable } from './HumaTable'
-
-const GET_ACTIVITY = gql`
-  query GetCreditLineActivity($pool: String!, $owner: String!, $event: [Int]!) {
-    creditEvents(
-      where: { pool: $pool, owner: $owner, event_in: $event }
-      orderBy: timestamp
-      orderDirection: desc
-    ) {
-      id
-      amount
-      timestamp
-      owner
-      pool
-      event
-    }
-  }
-`
-
-type Props = {
-  poolInfo: PoolInfoType
-  targetEvents: CreditEvent[]
-}
-
-type ActivityDataType = {
-  id: string
-  owner: string
-  pool: string
-  timestamp: string
-  amount: string
-  event: number
-  eventText: string | undefined
-}
-
-const columns = [
-  { title: 'Action', dataIndex: 'eventText' },
-  {
-    title: 'Amount',
-    action: (record: { amount: string }) => {
-      if (isEmpty(record.amount) || Number.isNaN(record.amount)) {
-        return ''
-      }
-      return Number(record.amount).toFixed(2)
-    },
-  },
-  { title: 'Date', dataIndex: 'timestamp' },
-]
-
-export function Activity({
-  poolInfo,
-  targetEvents,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const { account } = useWeb3React()
-  const { decimals } = poolInfo.poolUnderlyingToken
-  const [events, setEvents] = useState<ActivityDataType[] | undefined>()
-  const { data } = useQuery<{
-    creditEvents: ActivityDataType[]
-  }>(GET_ACTIVITY, {
-    variables: {
-      pool: poolInfo.pool,
-      owner: account,
-      event: targetEvents,
-    },
-  })
-  const { isSmSize } = useMQ()
-
-  const getPadding = () => {
-    if (isSmSize) {
-      return theme.spacing(2, 3)
-    }
-    return theme.spacing(4, 6)
-  }
-
-  useEffect(() => {
-    if (!data?.creditEvents) {
-      return
-    }
-    const result = data.creditEvents.map((item) => {
-      const event = JSON.parse(JSON.stringify(item)) as ActivityDataType
-      event.eventText = CreditEventText[item.event]
-      event.amount = downScale(event.amount, decimals)
-      event.timestamp = timeUtil.timestampToLL(Number(event.timestamp))
-      return event
-    })
-    setEvents(result)
-  }, [data?.creditEvents, decimals])
-
-  const styles = {
-    wrapper: css`
-      margin-top: ${theme.spacing(9)};
-    `,
-    title: css`
-      font-weight: 800;
-      font-size: 24px;
-      color: ${theme.palette.text.primary};
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    tableWrapper: css`
-      box-shadow: 0px 4px 40px 8px rgba(0, 0, 0, 0.04);
-      border-radius: 24px;
-      padding: ${getPadding()};
-    `,
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Box css={styles.title}>Recent Activity</Box>
-      <Box css={styles.tableWrapper}>
-        <HumaTable columns={columns} rows={events} hideRowsPerPage={isSmSize} />
-      </Box>
-    </Box>
-  )
-}

package/src/components/Factoring/FactoredList.tsx

@@ -1,143 +0,0 @@
-import { Box, css, LinearProgress, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  AccountStats,
-  downScale,
-  formatMoney,
-  hasRFActiveLoan,
-  PoolInfoType,
-  timestampToLL,
-} from '@huma-finance/shared'
-import { useMQ, usePoolUnderlyingToken } from '@huma-finance/web-shared'
-import React, { useEffect, useState } from 'react'
-
-import { ColumnType } from '../../utilTypes'
-import { HumaTable } from '../HumaTable'
-import { ReceiptIcon } from '../icons'
-
-type Props<T> = {
-  title: 'Streams' | 'Invoices'
-  poolInfo: PoolInfoType
-  loading: boolean
-  accountStats: AccountStats
-  handlePayManually: (item: T) => void
-  getColumns: (handlePayManually: (item: T) => void) => ColumnType<T>[]
-  setItem?: (
-    accountStats: AccountStats,
-  ) => Promise<{ name?: string; payer?: string }>
-}
-
-export function FactoredList<T>({
-  title,
-  poolInfo,
-  loading,
-  accountStats,
-  handlePayManually,
-  getColumns,
-  setItem,
-}: Props<T>): React.ReactElement {
-  const theme = useTheme()
-  const { isMdSize } = useMQ()
-  const { isActive, chainId } = useWeb3React()
-  const { decimals } = usePoolUnderlyingToken(
-    poolInfo.poolName,
-    poolInfo.poolType,
-    chainId,
-  )
-  const [factoredItem, setFactoredItem] = useState<Partial<T>>()
-  const { creditRecord, receivableInfo } = accountStats
-  const hasActiveLoan = hasRFActiveLoan(creditRecord, receivableInfo)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (creditRecord && receivableInfo?.receivableParam.gt(0) && decimals) {
-        const id = receivableInfo.receivableParam.toString()
-        const dueDate = timestampToLL(creditRecord.dueDate.toNumber())
-        const { receivableAmount } = receivableInfo
-        const { totalDue } = creditRecord
-        let factoredItem = {
-          id,
-          due: dueDate,
-          icon: <ReceiptIcon css={{ width: '24px' }} />,
-          amount: formatMoney(downScale(receivableAmount.toString(), decimals)),
-          factored: formatMoney(downScale(totalDue.toString(), decimals)),
-          remained: formatMoney(
-            downScale(receivableAmount.sub(totalDue).toString(), decimals),
-          ),
-        } as T
-        if (setItem) {
-          const customProps = await setItem(accountStats)
-          factoredItem = { ...factoredItem, ...customProps }
-        }
-        setFactoredItem(factoredItem)
-      }
-    }
-    fetchData()
-  }, [accountStats, creditRecord, decimals, receivableInfo, setItem])
-
-  const getPadding = () => {
-    if (isMdSize) {
-      return theme.spacing(0, 1, 1, 1)
-    }
-    return theme.spacing(0, 2, 2, 2)
-  }
-
-  const styles = {
-    title: css`
-      font-weight: 800;
-      color: ${theme.palette.text.primary};
-      font-size: 24px;
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    description: css`
-      font-weight: 400;
-      color: ${theme.palette.text.primary};
-      font-size: 1rem;
-    `,
-    tableWrapper: css`
-      margin-top: ${theme.spacing(3)};
-      padding: ${getPadding()};
-      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-      border: 1px solid #ffffff;
-      border-radius: 24px;
-      position: relative;
-    `,
-    progress: css`
-      width: calc(100% - 30px);
-      position: absolute;
-      top: 0;
-      left: ${theme.spacing(2)};
-    `,
-  }
-
-  return (
-    <Box>
-      <Box css={styles.title}>Factored {title}</Box>
-      <Box css={styles.description} marginBottom={theme.spacing(6)}>
-        {!isActive && (
-          <Box component='span'>
-            Please connect wallet to check your factored {title.toLowerCase()}.
-          </Box>
-        )}
-        {isActive && !hasActiveLoan && (
-          <Box component='span'>
-            You don’t have any factored {title.toLowerCase()}.
-          </Box>
-        )}
-        {isActive && hasActiveLoan && factoredItem && (
-          <Box css={styles.tableWrapper}>
-            {loading && (
-              <Box css={styles.progress}>
-                <LinearProgress />
-              </Box>
-            )}
-            <HumaTable
-              columns={getColumns(handlePayManually)}
-              rows={[factoredItem]}
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  )
-}

package/src/components/Factoring/UpcomingList.tsx

@@ -1,90 +0,0 @@
-import { Box, css, LinearProgress, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { useMQ } from '@huma-finance/web-shared'
-import React from 'react'
-
-import { ColumnType, WCProps } from '../../utilTypes'
-import { HumaTable } from '../HumaTable'
-
-type Props<T> = {
-  items: T[] | undefined
-  loading: boolean
-  columns: ColumnType<T>[]
-  title: string
-  connectWalletDesc: string
-  noItemDesc: string
-}
-
-export function UpcomingList<T>({
-  items,
-  loading,
-  columns,
-  title,
-  connectWalletDesc,
-  noItemDesc,
-  children,
-}: WCProps<Props<T>>): React.ReactElement {
-  const theme = useTheme()
-  const { isActive } = useWeb3React()
-  const { isMdSize, isSmSize } = useMQ()
-
-  const getPadding = () => {
-    if (isMdSize) {
-      return theme.spacing(0, 1, 1, 1)
-    }
-    return theme.spacing(0, 2, 2, 2)
-  }
-
-  const styles = {
-    title: css`
-      font-weight: 800;
-      color: ${theme.palette.text.primary};
-      font-size: 24px;
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    description: css`
-      font-weight: 400;
-      color: ${theme.palette.text.primary};
-      font-size: 1rem;
-    `,
-    tableWrapper: css`
-      margin-top: ${theme.spacing(3)};
-      padding: ${getPadding()};
-      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-      border: 1px solid #ffffff;
-      border-radius: 24px;
-      position: relative;
-    `,
-    progress: css`
-      width: calc(100% - 30px);
-      position: absolute;
-      top: 0;
-      left: ${theme.spacing(2)};
-    `,
-  }
-
-  return (
-    <Box>
-      <Box css={styles.title}>{title}</Box>
-      <Box css={styles.description} marginBottom={theme.spacing(6)}>
-        {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
-        {isActive && !items?.length && <Box>{noItemDesc}</Box>}
-        {isActive && !!items?.length && (
-          <Box css={styles.tableWrapper}>
-            {loading && (
-              <Box css={styles.progress}>
-                <LinearProgress />
-              </Box>
-            )}
-            <HumaTable
-              columns={columns}
-              rows={items}
-              hideRowsPerPage={isSmSize}
-            />
-          </Box>
-        )}
-        {children}
-      </Box>
-    </Box>
-  )
-}

package/src/components/Factoring/index.ts

@@ -1,2 +0,0 @@
-export * from './UpcomingList'
-export * from './FactoredList'

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',
-                },
-              },
-            },
-          }}
-        />
-      )}
-    </>
-  )
-}