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

package/src/components/CreditLine/solanaPayment/index.tsx

@@ -0,0 +1,83 @@
+import { SolanaPoolInfo } from '@huma-finance/shared'
+import { useBorrowerAccounts } from '@huma-finance/web-shared'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { setStep } from '../../../store/widgets.reducers'
+import { ErrorModal } from '../../ErrorModal'
+import { ChooseAmount } from './1-ChooseAmount'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaPaymentProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
+ */
+export interface SolanaPaymentProps {
+  poolInfo: SolanaPoolInfo
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaPayment({
+  poolInfo,
+  handleClose,
+  handleSuccess,
+}: SolanaPaymentProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { creditStateAccount, loading: isLoadingBorrowerAccounts } =
+    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [dispatch, step])
+
+  const title = 'Make Payment'
+  if (isLoadingBorrowerAccounts) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && creditStateAccount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          creditStateAccount={creditStateAccount}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Done poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/InputAmountModal.tsx

@@ -93,6 +93,7 @@ export function InputAmountModal({
       font-size: 13px;
       line-height: 22px;
       letter-spacing: 0.46px;
+      white-space: nowrap;
     `,
     info: css`
       color: ${theme.palette.text.secondary};

package/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx

@@ -68,13 +68,18 @@ export function ChooseAmount({
         lpConfig.withdrawalLockoutPeriodInDays * SECONDS_IN_A_DAY
       if (nextEpochStartTime < lockupEndTime) {
         const lockupEndTimeDayjs = dayjs.unix(lockupEndTime).date(1)
+        const withdrawTime = lockupEndTimeDayjs.add(1, 'month')
         dispatch(setStep(WIDGET_STEP.Error))
         dispatch(
           setError({
             errorReason: 'Redemption too soon',
             errorMessage: `Your last deposit was on ${timestampToLL(
               depositRecord!.lastDepositTime.toNumber(),
-            )}. You can redeem on ${timestampToLL(lockupEndTimeDayjs.unix())}.`,
+            )}. You can begin submitting redemption requests on ${timestampToLL(
+              lockupEndTimeDayjs.unix(),
+            )}, which can be redeemed starting ${timestampToLL(
+              withdrawTime.unix(),
+            )}.`,
           }),
         )
       }

package/src/components/Lend/solanaCancelRedemption/index.tsx

@@ -23,12 +23,14 @@ import { Done } from './3-Done'
  */
 export interface SolanaLendCancelRedemptionProps {
   poolInfo: SolanaPoolInfo
+  tranche?: TrancheType
   handleClose: () => void
   handleSuccess?: () => void
 }
 
 export function SolanaLendCancelRedemption({
   poolInfo,
+  tranche,
   handleClose,
   handleSuccess,
 }: SolanaLendCancelRedemptionProps): React.ReactElement | null {
@@ -41,7 +43,9 @@ export function SolanaLendCancelRedemption({
     loading: isLoadingLenderAccounts,
   } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const [selectedTranche, setSelectedTranche] = useState<
+    TrancheType | undefined
+  >(tranche)
 
   useEffect(() => {
     if (!step && !isLoadingLenderAccounts) {
@@ -52,6 +56,11 @@ export function SolanaLendCancelRedemption({
         juniorLenderStateAccount?.redemptionRecord.numSharesRequested ?? 0,
       )
 
+      if (selectedTranche) {
+        dispatch(setStep(WIDGET_STEP.Transfer))
+        return
+      }
+
       if (
         juniorTrancheSharesRequested.gtn(0) &&
         seniorTrancheSharesRequested.lten(0)
@@ -83,6 +92,7 @@ export function SolanaLendCancelRedemption({
     isLoadingLenderAccounts,
     seniorLenderStateAccount?.redemptionRecord.numSharesRequested,
     juniorLenderStateAccount?.redemptionRecord.numSharesRequested,
+    selectedTranche,
   ])
 
   const title = 'Cancel Redemption'

package/src/components/Lend/solanaSupply/5-Success.tsx

@@ -1,8 +1,8 @@
 import { formatMoney, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
 import { SolanaPoolState } from '@huma-finance/web-shared'
-import moment from 'moment'
 import React from 'react'
 
+import dayjs from 'dayjs'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { useAppSelector } from '../../../hooks/useRedux'
 import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
@@ -26,14 +26,16 @@ export function Success({
   ]
 
   const getSubContent = () => {
-    const currentTime = moment().add(
-      poolState.withdrawalLockupPeriodDays,
-      'days',
-    )
+    const lockupEndTime = dayjs()
+      .add(poolState.withdrawalLockupPeriodDays ?? 0, 'day')
+      .date(1)
+    const withdrawTime = lockupEndTime.add(1, 'month')
     return [
-      `First redemption date: ${timeUtil.timestampToLL(
-        currentTime.unix(),
-      )}. You can redeem end of each month after.`,
+      `You can begin submitting redemption requests on ${timeUtil.timestampToLL(
+        lockupEndTime.unix(),
+      )}, which can be redeemed starting ${timeUtil.timestampToLL(
+        withdrawTime.unix(),
+      )}.`,
     ]
   }
 

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -9,10 +9,10 @@ import {
 import { sendTxAtom } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
 import { useAtom } from 'jotai'
-import moment from 'moment'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
+import dayjs from 'dayjs'
 import { Campaign } from '.'
 import {
   useDoesChainSupportNotifi,
@@ -90,14 +90,16 @@ export function Success({
   ]
 
   const getSubContent = () => {
-    const currentTime = moment().add(
-      lpConfig.withdrawalLockoutPeriodInDays,
-      'days',
-    )
+    const lockupEndTime = dayjs()
+      .add(lpConfig.withdrawalLockoutPeriodInDays, 'day')
+      .date(1)
+    const withdrawTime = lockupEndTime.add(1, 'month')
     return [
-      `First redemption date: ${timeUtil.timestampToLL(
-        currentTime.unix(),
-      )}. You can redeem end of each month after.`,
+      `You can begin submitting redemption requests on ${timeUtil.timestampToLL(
+        lockupEndTime.unix(),
+      )}, which can be redeemed starting ${timeUtil.timestampToLL(
+        withdrawTime.unix(),
+      )}.`,
     ]
   }
 

package/src/components/Lend/supplyV2/7-Notifications.tsx

@@ -25,5 +25,10 @@ export function Notifications({
     }
   }, [campaign, dispatch, handleAction])
 
-  return <NotifiSubscriptionModal handleSuccess={handleUserAction} />
+  return (
+    <NotifiSubscriptionModal
+      successText={campaign ? 'VIEW POINTS' : undefined}
+      handleSuccess={handleUserAction}
+    />
+  )
 }

package/src/components/Notifi/NotifiContextWrapper.tsx

@@ -0,0 +1,57 @@
+import { arrayify } from '@ethersproject/bytes'
+import { ChainEnum, getBlockchainConfigFromChain } from '@huma-finance/shared'
+import { NotifiContextProvider } from '@notifi-network/notifi-react'
+import { useWeb3React } from '@web3-react/core'
+import { providers } from 'ethers'
+import React, { useMemo } from 'react'
+
+type Props = {
+  chainId: number | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any
+}
+
+export function NotifiContextWrapper({
+  chainId,
+  children,
+}: Props): React.ReactElement | null {
+  const { account, provider } = useWeb3React()
+  const signer = useMemo(() => {
+    if (provider instanceof providers.JsonRpcProvider) {
+      return provider.getSigner()
+    }
+    return undefined
+  }, [provider])
+
+  if (account == null || signer == null || chainId == null) {
+    return null
+  }
+
+  let cardId = ''
+  if (chainId === ChainEnum.Celo || chainId === ChainEnum.Alfajores) {
+    cardId = process.env.REACT_APP_NOTIFI_CONFIG_ID_CELO ?? ''
+  } else if (chainId === ChainEnum.Polygon || chainId === ChainEnum.Amoy) {
+    cardId = process.env.REACT_APP_NOTIFI_CONFIG_ID_POLYGON ?? ''
+  } else if (
+    chainId === ChainEnum.Scroll ||
+    chainId === ChainEnum.ScrollSepolia
+  ) {
+    cardId = process.env.REACT_APP_NOTIFI_CONFIG_ID_SCROLL ?? ''
+  }
+
+  return (
+    <NotifiContextProvider
+      tenantId='humafinanceprod'
+      env='Production'
+      signMessage={async (message: Uint8Array) => {
+        const result = await signer.signMessage(message)
+        return arrayify(result)
+      }}
+      walletPublicKey={account}
+      walletBlockchain={getBlockchainConfigFromChain(chainId)}
+      cardId={cardId}
+    >
+      {children}
+    </NotifiContextProvider>
+  )
+}

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -1,21 +1,17 @@
-import { getBlockchainConfigFromChain } from '@huma-finance/shared'
 import { txAtom } from '@huma-finance/web-shared'
 import { Box, css, TextField, Typography, useTheme } from '@mui/material'
-import {
-  BroadcastEventTypeItem,
-  CardConfigItemV1,
-  DirectPushEventTypeItem,
-  EventTypeItem,
-  NotifiFrontendClient,
-  SignMessageParams,
-  Uint8SignMessageFunction,
-} from '@notifi-network/notifi-frontend-client'
-import { useWeb3React } from '@web3-react/core'
-import { ethers } from 'ethers'
 import { useResetAtom } from 'jotai/utils'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
-import { useNotifiClient } from '../../hooks/useNotifi'
+import {
+  FtuStage,
+  useNotifiFrontendClientContext,
+  useNotifiTargetContext,
+  useNotifiTenantConfigContext,
+  useNotifiTopicContext,
+  useNotifiUserSettingContext,
+} from '@notifi-network/notifi-react'
+import { NotifiFrontendClient } from '@notifi-network/notifi-frontend-client'
 import { useAppDispatch } from '../../hooks/useRedux'
 import { resetState } from '../../store/widgets.reducers'
 import { BottomButton } from '../BottomButton'
@@ -24,83 +20,48 @@ import { LoadingModal } from '../LoadingModal'
 import { WrapperModal } from '../WrapperModal'
 
 type Props = {
+  successText?: string
   handleSuccess: () => void
 }
 
-function getIdFromEventType(eventType: EventTypeItem): string {
-  if (eventType.type === 'directPush') {
-    const directPushEventType = eventType as DirectPushEventTypeItem
-    return (
-      directPushEventType.directPushId as {
-        value: string
-      }
-    ).value
-  }
-  if (eventType.type === 'broadcast') {
-    const broadcastEventType = eventType as BroadcastEventTypeItem
-    return (
-      broadcastEventType.broadcastId as {
-        value: string
-      }
-    ).value
-  }
-
-  return ''
-}
-
-async function fetchEventTypes(
-  notifiClient: NotifiFrontendClient,
-): Promise<(EventTypeItem & { enabled: boolean })[]> {
-  const subscribedAlerts = await notifiClient.getAlerts()
-
-  const subscriptionConfig = (await notifiClient.fetchSubscriptionCard({
-    id: process.env.REACT_APP_NOTIFI_CONFIG_ID ?? '',
-    type: 'SUBSCRIPTION_CARD',
-  })) as CardConfigItemV1
-
-  const eventTypes = subscriptionConfig?.eventTypes?.map(
-    (eventType): EventTypeItem & { enabled: boolean } => {
-      const eventTypeId = getIdFromEventType(eventType)
-      let enabled = false
-      // Check whether the user is subscribed to the event
-      const subscribedAlert = subscribedAlerts?.find(
-        (alert) => alert.filterOptions.indexOf(eventTypeId) >= 0,
-      )
-
-      if (subscribedAlert) {
-        enabled = true
-      }
-
-      return {
-        ...eventType,
-        enabled,
-      }
-    },
-  )
-
-  return eventTypes
+const validateDefaultTargetGroup = async (
+  frontendClient: NotifiFrontendClient,
+) => {
+  // NOTE: this extra request is necessary as the targetGroupId state in NotifiTargetContext will not be updated constantly right after login
+  const targetGroup = (
+    await frontendClient?.fetchFusionData()
+  )?.targetGroup?.find((group) => group?.name === 'Default')
+  return !!targetGroup
 }
 
 export function NotifiSubscriptionModal({
+  successText,
   handleSuccess,
 }: Props): React.ReactElement {
   const theme = useTheme()
   const reset = useResetAtom(txAtom)
   const dispatch = useAppDispatch()
-  const { account, chainId, provider } = useWeb3React()
   const [showSuccessScreen, setShowSuccessScreen] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [emailAddress, setEmailAddress] = useState<string>('')
   const [emailValid, setEmailValid] = useState<boolean>()
-  const { notifiClient } = useNotifiClient(account, chainId)
-
-  const signMessage: Uint8SignMessageFunction = async (
-    message: Uint8Array,
-  ): Promise<Uint8Array> => {
-    const signer = provider!.getSigner()
-    const signature = await signer.signMessage(Buffer.from(message))
-    return ethers.utils.arrayify(signature)
-  }
+  const {
+    frontendClientStatus: { isInitialized, isAuthenticated, isExpired },
+    frontendClient,
+    login,
+  } = useNotifiFrontendClientContext()
+  const { fusionEventTopics } = useNotifiTenantConfigContext()
+  const { subscribeAlertsDefault } = useNotifiTopicContext()
+  const {
+    targetDocument: { targetGroupId },
+    updateTargetInputs,
+    renewTargetGroup,
+  } = useNotifiTargetContext()
+  const {
+    ftuStage,
+    isLoading: isLoadingFtuStage,
+    updateFtuStage,
+  } = useNotifiUserSettingContext()
 
   const handleEmailAddressChange = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -110,43 +71,89 @@ export function NotifiSubscriptionModal({
     setEmailAddress(event.target.value)
   }
 
+  useEffect(() => {
+    async function subscribe() {
+      if (
+        !isInitialized ||
+        !isAuthenticated ||
+        !targetGroupId ||
+        isLoadingFtuStage
+      ) {
+        return
+      }
+
+      // If a user is authenticated but already finished with the FTU (First Time User) setup
+      // (AKA their login expired and they logged back in), then we can skip the subscription step.
+      if (ftuStage !== FtuStage.Done) {
+        await updateTargetInputs('email', { value: emailAddress! })
+        // Authorize this email address for this wallet
+
+        if (!targetGroupId) {
+          setIsLoading(false)
+          return
+        }
+
+        await subscribeAlertsDefault(fusionEventTopics, targetGroupId)
+        await updateFtuStage(FtuStage.Done)
+
+        const targetGroup = (
+          await frontendClient?.fetchFusionData()
+        )?.targetGroup?.find((group) => group?.name === 'Default')
+        const emailTarget = targetGroup?.emailTargets?.[0]
+        if (emailTarget && !emailTarget.isConfirmed) {
+          await frontendClient.sendEmailTargetVerification({
+            targetId: emailTarget.id,
+          })
+        }
+      }
+
+      setShowSuccessScreen(true)
+      setIsLoading(false)
+    }
+
+    subscribe()
+  }, [
+    isInitialized,
+    isAuthenticated,
+    targetGroupId,
+    updateTargetInputs,
+    emailAddress,
+    subscribeAlertsDefault,
+    fusionEventTopics,
+    updateFtuStage,
+    isLoadingFtuStage,
+    ftuStage,
+    frontendClient,
+  ])
+
+  useEffect(() => {
+    const loginIfExpired = async () => {
+      if (isExpired) {
+        await login()
+      }
+    }
+
+    loginIfExpired()
+  }, [isExpired, login])
+
   const logInAndSubscribe = async (): Promise<void> => {
-    if (notifiClient != null && chainId != null) {
+    if (!isAuthenticated) {
       setIsLoading(true)
 
       // Ask user to sign a message to authenticate
       try {
-        await notifiClient.logIn({
-          walletBlockchain: getBlockchainConfigFromChain(chainId),
-          signMessage,
-        } as SignMessageParams)
+        await login()
+
+        const isDefaultTargetExist = await validateDefaultTargetGroup(
+          frontendClient,
+        )
+
+        if (!isDefaultTargetExist) {
+          await renewTargetGroup()
+        }
       } catch (e) {
         setIsLoading(false)
-        return
-      }
-
-      // Fetch all event types
-      const fetchedEventTypes = await fetchEventTypes(notifiClient)
-
-      //   Authorize this email address for this wallet
-      await notifiClient.ensureTargetGroup({
-        name: 'Default',
-        emailAddress: emailAddress!,
-      })
-
-      // Intentionally running this in serial because the Notifi ensureAlert can't handle
-      // multiple calls. Notified their team to fix this.
-      // eslint-disable-next-line no-restricted-syntax
-      for (const eventType of fetchedEventTypes) {
-        // eslint-disable-next-line no-await-in-loop
-        await notifiClient.ensureAlert({
-          eventType,
-          inputs: {},
-        })
       }
-
-      setShowSuccessScreen(true)
-      setIsLoading(false)
     }
   }
 
@@ -196,7 +203,7 @@ export function NotifiSubscriptionModal({
           <CheckIcon />
         </Box>
         <BottomButton variant='contained' onClick={handleCloseModal}>
-          DONE
+          {successText ?? 'DONE'}
         </BottomButton>
       </WrapperModal>
     )
@@ -204,11 +211,7 @@ export function NotifiSubscriptionModal({
 
   return (
     <WrapperModal title='Connect Your Email'>
-      <Typography
-        variant='body2'
-        textAlign='justify'
-        margin={theme.spacing(6, 0, 4, 0)}
-      >
+      <Typography variant='body2' margin={theme.spacing(6, 0, 4, 0)}>
         Connect your emails to receive important update about your account.
       </Typography>
       <Box css={styles.inputWrapper}>
@@ -218,7 +221,9 @@ export function NotifiSubscriptionModal({
           type='email'
           value={emailAddress}
           onChange={handleEmailAddressChange}
-          variant='standard'
+          variant='outlined'
+          color='primary'
+          focused
         />
       </Box>
       <Box css={styles.disclaimer}>
@@ -228,7 +233,7 @@ export function NotifiSubscriptionModal({
       <BottomButton
         variant='contained'
         onClick={logInAndSubscribe}
-        disabled={!emailValid || isLoading}
+        disabled={!emailValid || isLoading || !isInitialized}
       >
         CONNECT EMAIL
       </BottomButton>

package/src/components/SuperfluidFactoring/index.tsx

@@ -1,37 +1,31 @@
 import { Box, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  CreditEvent,
-  POOL_NAME,
-  POOL_TYPE,
-  PoolMap,
-} from '@huma-finance/shared'
+import { POOL_NAME, POOL_TYPE, PoolMap } from '@huma-finance/shared'
 import { useFactoring } from '@huma-finance/web-shared'
 import React from 'react'
 
-import { SubgraphService } from '@huma-finance/sdk'
-import { Activity } from '../Activity'
-import { ApolloWrapper } from '../ApolloWrapper'
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import { StreamFactoringBorrow } from '../StreamFactoring/borrow'
-import { SuperfluidFactoredList } from './SuperfluidFactoredList'
-import { StreamItem, SuperfluidUpcomingList } from './SuperfluidUpcomingList'
+
+export type StreamItem = {
+  id: string
+  icon: EmotionJSX.Element
+  token: string
+  tokenId: string
+  payer: string
+  flowrate: string
+  flowrateMonth: string
+}
 
 export function SuperfluidFactoring(): React.ReactElement {
   const theme = useTheme()
   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)
 
@@ -41,34 +35,6 @@ export function SuperfluidFactoring(): React.ReactElement {
       <Box css={styles.description} marginBottom={theme.spacing(6)}>
         {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={SubgraphService.getSubgraphUrlForChainId(chainId!)}>
-        {poolInfo && (
-          <Activity
-            poolInfo={poolInfo}
-            targetEvents={[
-              CreditEvent.DrawdownMadeWithReceivable,
-              CreditEvent.PaymentMade,
-              CreditEvent.ReceivedPaymentProcessed,
-            ]}
-          />
-        )}
-      </ApolloWrapper>
       {poolInfo && selectedItem && actionType === 'borrow' && (
         <StreamFactoringBorrow
           poolName={POOL_NAME.Superfluid}