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

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

@@ -89,6 +89,11 @@ import {
   SolanaBorrow,
   SolanaBorrowProps,
 } from './components/CreditLine/solanaBorrow'
+import {
+  SolanaPayment,
+  SolanaPaymentProps,
+} from './components/CreditLine/solanaPayment'
+import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -132,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>
@@ -566,8 +575,6 @@ function SolanaWidget(props: WCProps<SolanaWidgetProps>) {
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaLendSupplyWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
  */
 type SolanaLendSupplyWidgetProps = SolanaLendSupplyProps & SolanaWidgetProps
 
@@ -587,8 +594,6 @@ export function SolanaLendSupplyWidget(props: SolanaLendSupplyWidgetProps) {
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaLendAddRedemptionWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
  */
 type SolanaLendAddRedemptionWidgetProps = SolanaLendAddRedemptionProps &
   SolanaWidgetProps
@@ -611,8 +616,6 @@ export function SolanaLendAddRedemptionWidget(
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaLendCancelRedemptionWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
  */
 type SolanaLendCancelRedemptionWidgetProps = SolanaLendCancelRedemptionProps &
   SolanaWidgetProps
@@ -635,8 +638,6 @@ export function SolanaLendCancelRedemptionWidget(
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaBorrowWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
  */
 type SolanaBorrowWidgetProps = SolanaBorrowProps & SolanaWidgetProps
 
@@ -652,3 +653,24 @@ export function SolanaBorrowWidget(props: SolanaBorrowWidgetProps) {
     </SolanaWidget>
   )
 }
+
+/**
+ * Lend pool supply widget props for Solana pools
+ * @typedef {Object} SolanaPaymentWidgetProps
+ */
+type SolanaPaymentWidgetProps = SolanaPaymentProps & SolanaWidgetProps
+
+/**
+ * Lend pool supply widget for Solana pools
+ *
+ * @param {SolanaPaymentWidgetProps} props - Widget props
+ */
+export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
+  return (
+    <SolanaWidget {...props}>
+      <SolanaPayment {...props} />
+    </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/CreditLine/solanaBorrow/2-ApproveAllowance.tsx

@@ -1,89 +0,0 @@
-import {
-  getSentinelAddress,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import {
-  Account,
-  createApproveCheckedInstruction,
-  TOKEN_2022_PROGRAM_ID,
-} from '@solana/spl-token'
-import { useConnection, useWallet } from '@solana/wallet-adapter-react'
-import { PublicKey, Transaction } from '@solana/web3.js'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { SolanaTxSendModal } from '../../SolanaTxSendModal'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  tokenAccount: Account
-}
-
-export function ApproveAllowance({
-  poolInfo,
-  tokenAccount,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { wallet, publicKey, sendTransaction, signTransaction } = useWallet()
-  const sentinel = useMemo(
-    () => getSentinelAddress(poolInfo.chainId),
-    [poolInfo.chainId],
-  )
-  const { connection } = useConnection()
-  const [transaction, setTransaction] = useState<Transaction>()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }, [dispatch])
-
-  useEffect(() => {
-    async function getTx() {
-      if (!wallet || !publicKey || !connection || !signTransaction) {
-        return
-      }
-
-      const tx = new Transaction().add(
-        createApproveCheckedInstruction(
-          tokenAccount.address,
-          new PublicKey(poolInfo.underlyingMint.address),
-          new PublicKey(sentinel), // delegate
-          publicKey, // owner of the wallet
-          BigInt(
-            SolanaTokenUtils.parseUnits(
-              '100000000000', // 100 billion
-              poolInfo.underlyingMint.decimals,
-            ).toString(),
-          ), // amount
-          poolInfo.underlyingMint.decimals,
-          undefined, // multiSigners
-          TOKEN_2022_PROGRAM_ID,
-        ),
-      )
-
-      setTransaction(tx)
-    }
-    getTx()
-  }, [
-    connection,
-    dispatch,
-    poolInfo.underlyingMint.address,
-    poolInfo.underlyingMint.decimals,
-    publicKey,
-    sendTransaction,
-    sentinel,
-    signTransaction,
-    tokenAccount.address,
-    wallet,
-  ])
-
-  return (
-    <SolanaTxSendModal
-      tx={transaction}
-      chainId={poolInfo.chainId}
-      handleSuccess={handleSuccess}
-    />
-  )
-}

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'