@huma-finance/widgets 0.0.62-beta.612 → 0.0.62-beta.616

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.612+99e0987",
+  "version": "0.0.62-beta.616+c3a83d3",
   "publishConfig": {
     "access": "public"
   },
@@ -25,20 +25,22 @@
     "@emotion/styled": "^11.3.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/bignumber": "^5.6.0",
+    "@ethersproject/bytes": "^5.7.0",
     "@ethersproject/constants": "^5.7.0",
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.612+99e0987",
-    "@huma-finance/shared": "^0.0.62-beta.612+99e0987",
-    "@huma-finance/web-shared": "^0.0.62-beta.612+99e0987",
+    "@huma-finance/sdk": "^0.0.62-beta.616+c3a83d3",
+    "@huma-finance/shared": "^0.0.62-beta.616+c3a83d3",
+    "@huma-finance/web-shared": "^0.0.61",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
     "@mui/system": "^5.0.6",
     "@mui/x-date-pickers": "^5.0.7",
-    "@notifi-network/notifi-frontend-client": "^0.91.1",
+    "@notifi-network/notifi-frontend-client": "^1.1.2",
+    "@notifi-network/notifi-react": "^1.1.2",
     "@reduxjs/toolkit": "^1.8.6",
     "@types/utf8": "^3.0.1",
     "@walletconnect/ethereum-provider": "1.8.0",
@@ -76,7 +78,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.0",
+    "typescript": "^4.8.4",
     "utf8": "^3.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -186,11 +188,6 @@
     "wagmi": "^0.12.10"
   },
   "peerDependencies": {
-    "@coral-xyz/anchor": "^0.30.1",
-    "@solana/spl-token": "^0.4.8",
-    "@solana/wallet-adapter-base": "^0.9.23",
-    "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.95.3",
     "ethers": "^5.6.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -200,5 +197,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "99e0987b7a460f47f40d91836af7d44c9744142b"
+  "gitHead": "c3a83d314e09557e5d192ea8c2b4dd6c90c20609"
 }

package/src/components/InputAmountModal.tsx

@@ -20,7 +20,6 @@ type Props = {
   tokenSymbol: string
   suffix?: string
   currentAmount: number | string
-  minimumAmount?: number
   maxAmount: number | string
   maxAmountText?: string
   maxAmountTitle?: string
@@ -36,7 +35,6 @@ export function InputAmountModal({
   tokenSymbol,
   suffix: defaultSuffix,
   currentAmount,
-  minimumAmount,
   maxAmount,
   maxAmountText = 'MAX',
   maxAmountTitle,
@@ -127,9 +125,6 @@ export function InputAmountModal({
     if (!isEmpty(maxAmount) && Number(currentAmount) > Number(maxAmount)) {
       return true
     }
-    if (!isEmpty(minimumAmount) && Number(currentAmount) < minimumAmount!) {
-      return true
-    }
     return false
   }
 
@@ -162,6 +157,7 @@ export function InputAmountModal({
           />
         </Box>
       </Box>
+
       {infos && (
         <Box>
           {infos.map((info) => (
@@ -171,13 +167,7 @@ export function InputAmountModal({
           ))}
         </Box>
       )}
-      {!!minimumAmount && minimumAmount > 0 && (
-        <Box>
-          <Typography css={styles.info} key='minDeposit'>
-            Minimum deposit: {minimumAmount} {tokenSymbol}
-          </Typography>
-        </Box>
-      )}
+
       <BottomButton
         variant='contained'
         onClick={handleAction}

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/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 redemptionTime = dayjs()
+      .add(lpConfig.withdrawalLockoutPeriodInDays, 'day')
+      .date(1)
+    const withdrawTime = redemptionTime.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(
+        redemptionTime.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/WidgetWrapper.tsx

@@ -31,7 +31,7 @@ export function WidgetWrapper({
 }: WCProps<Props>): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { step, solanaSignature } = useAppSelector(selectWidgetState)
+  const { step } = useAppSelector(selectWidgetState)
   const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
   const reset = useResetAtom(txAtom)
 
@@ -42,14 +42,12 @@ export function WidgetWrapper({
   }, [dispatch, failReason, state])
 
   useEffect(() => {
-    if (step === WIDGET_STEP.Done && (txReceipt || solanaSignature)) {
-      if (handleSuccess && txReceipt) {
+    if (step === WIDGET_STEP.Done && txReceipt) {
+      if (handleSuccess) {
         handleSuccess(txReceipt.blockNumber)
-      } else if (handleSuccess && solanaSignature) {
-        handleSuccess(0) // solana tx doesn't have block number
       }
     }
-  }, [handleSuccess, solanaSignature, step, txReceipt])
+  }, [handleSuccess, step, txReceipt])
 
   const handleCloseModal = useCallback(() => {
     reset()

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 }
 }