@huma-finance/widgets 0.0.30 → 0.0.32

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

@@ -1,8 +1,7 @@
-import { useWeb3React } from '@web3-react/core'
 import {
+  downScale,
   POOL_NAME,
   POOL_TYPE,
-  downScale,
   useLenderApproved,
   useLenderPosition,
   usePoolAllowance,
@@ -10,9 +9,14 @@ import {
   usePoolUnderlyingTokenBalance,
   useWithdrawlLockoutInSeconds,
 } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
 import React, { useCallback, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
+import {
+  useIsFirstTimeNotifiUser,
+  useDoesChainSupportNotifi,
+} from '../../../hooks/useNotifi'
 import { useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -22,8 +26,9 @@ import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
 import { ChooseAmount } from './2-ChooseAmount'
 import { ApproveAllowance } from './3-ApproveAllowance'
-import { Transfer } from './6-Transfer'
-import { Success } from './7-Success'
+import { Transfer } from './4-Transfer'
+import { Success } from './5-Success'
+import { Notifications } from './6-Notifications'
 
 /**
  * Lend pool supply props
@@ -47,13 +52,15 @@ export function LendSupply({
   handleSuccess,
 }: LendSupplyProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
   const poolInfo = usePoolInfo(poolName, poolType)
   const { decimals } = poolInfo?.poolUnderlyingToken || {}
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const { allowance } = usePoolAllowance(poolName, poolType, account)
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
   const [lenderApproved, refreshLenderApproved] = useLenderApproved(
     poolName,
     poolType,
@@ -98,6 +105,14 @@ export function LendSupply({
     [handleSuccess, refreshLenderPosition],
   )
 
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleClose()
+    }
+  }, [dispatch, handleClose, isFirstTimeNotifiUser, notifiChainSupported])
+
   if (!poolInfo) {
     return null
   }
@@ -113,6 +128,7 @@ export function LendSupply({
       {step === WIDGET_STEP.Evaluation && (
         <Evaluation
           poolInfo={poolInfo}
+          handleClose={handleClose}
           handleApproveSuccess={handleApproveSuccess}
         />
       )}
@@ -129,7 +145,14 @@ export function LendSupply({
       )}
       {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
       {step === WIDGET_STEP.Done && (
-        <Success poolInfo={poolInfo} handleAction={handleClose} />
+        <Success
+          poolInfo={poolInfo}
+          handleAction={setupNotificationsOrClose}
+          hasNextStep={isFirstTimeNotifiUser}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
       )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -0,0 +1,264 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useWeb3React } from '@web3-react/core'
+import {
+  NotifiFrontendClient,
+  newFrontendClient,
+  Uint8SignMessageFunction,
+  SignMessageParams,
+  CardConfigItemV1,
+  DirectPushEventTypeItem,
+  EventTypeItem,
+  BroadcastEventTypeItem,
+} from '@notifi-network/notifi-frontend-client'
+import { getBlockchainConfigFromChain, txAtom } from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import {
+  Box,
+  Input,
+  InputAdornment,
+  Typography,
+  css,
+  useTheme,
+} from '@mui/material'
+import Email from '@mui/icons-material/Email'
+import { useResetAtom } from 'jotai/utils'
+
+import { WrapperModal } from '../WrapperModal'
+import { envUtil } from '../../utils/env'
+import { BottomButton } from '../BottomButton'
+import { LoadingModal } from '../LoadingModal'
+import { CheckIcon } from '../icons'
+import { resetState } from '../../store/widgets.reducers'
+import { useAppDispatch } from '../../hooks/useRedux'
+
+type Props = {
+  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
+}
+
+export function NotifiSubscriptionModal({
+  handleSuccess,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const reset = useResetAtom(txAtom)
+  const dispatch = useAppDispatch()
+  const { account, chainId, provider } = useWeb3React()
+  const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient>()
+  const [showSuccessScreen, setShowSuccessScreen] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [emailAddress, setEmailAddress] = useState<string>()
+  const [emailValid, setEmailValid] = useState<boolean>()
+
+  useEffect(() => {
+    const initializeClient = async () => {
+      if (account != null && chainId != null) {
+        const client = newFrontendClient({
+          account: { publicKey: account },
+          tenantId: 'humadapp',
+          env: envUtil.checkIsDev() ? 'Development' : 'Production',
+          walletBlockchain: getBlockchainConfigFromChain(chainId),
+        })
+
+        await client.initialize()
+
+        setNotifiClient(client)
+      }
+    }
+
+    initializeClient()
+  }, [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 handleEmailAddressChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    setEmailValid(emailRegex.test(event.target.value ?? ''))
+    setEmailAddress(event.target.value)
+  }
+
+  const logInAndSubscribe = async (): Promise<void> => {
+    if (notifiClient != null && chainId != null) {
+      setIsLoading(true)
+
+      // Ask user to sign a message to authenticate
+      try {
+        await notifiClient.logIn({
+          walletBlockchain: getBlockchainConfigFromChain(chainId),
+          signMessage,
+        } as SignMessageParams)
+      } 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)
+    }
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleSuccess()
+  }, [dispatch, handleSuccess, reset])
+
+  const styles = {
+    disclaimer: css`
+      ${theme.cssMixins.rowCentered};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      margin-top: 48px;
+    `,
+    inputField: css`
+      width: 90%;
+      font-size: 16px;
+    `,
+    inputWrapper: css`
+      width: 100%;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 82px;
+    `,
+  }
+
+  if (isLoading) {
+    return <LoadingModal title='Notifications' />
+  }
+
+  if (showSuccessScreen) {
+    return (
+      <WrapperModal
+        title='Success'
+        subTitle='You successfully connected your email'
+      >
+        <Box css={styles.check}>
+          <CheckIcon />
+        </Box>
+        <BottomButton variant='contained' onClick={handleCloseModal}>
+          DONE
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <WrapperModal title='Connect Your Email'>
+      <Typography variant='body2' margin='12px 0'>
+        Connect your wallet to receive important emails about your account
+      </Typography>
+      <Box css={styles.inputWrapper}>
+        <Input
+          css={styles.inputField}
+          type='email'
+          value={emailAddress}
+          onChange={handleEmailAddressChange}
+          placeholder='youremail@example.com'
+          startAdornment={
+            <InputAdornment position='start'>
+              <Email />
+            </InputAdornment>
+          }
+        />
+      </Box>
+      <Box css={styles.disclaimer}>
+        You can adjust these settings at any time by clicking the alert icon in
+        the header
+      </Box>
+      <BottomButton
+        variant='contained'
+        onClick={logInAndSubscribe}
+        disabled={!emailValid || isLoading}
+      >
+        CONNECT WALLET
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/SuperfluidFactoring/index.tsx

@@ -1,85 +1,85 @@
-import { Box } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  CreditEvent,
-  POOL_NAME,
-  POOL_TYPE,
-  PoolMap,
-  PoolSubgraphMap,
-  useFactoring,
-} from '@huma-finance/shared'
-import React from 'react'
-
-import { Activity } from '../Activity'
-import { ApolloWrapper } from '../ApolloWrapper'
-import { StreamFactoringBorrow } from '../StreamFactoring/borrow'
-import { SuperfluidFactoredList } from './SuperfluidFactoredList'
-import { StreamItem, SuperfluidUpcomingList } from './SuperfluidUpcomingList'
-
-export function SuperfluidFactoring(): React.ReactElement {
-  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)
-
-  return (
-    <Box css={styles.wrapper}>
-      <Box css={styles.title}>Stream Factoring</Box>
-      <Box css={styles.description} marginBottom='47px'>
-        {PoolMap.Stream[poolName]?.borrowDesc}
-      </Box>
-      {poolInfo && (
-        <SuperfluidFactoredList
-          poolInfo={poolInfo}
-          handlePayManually={handlePayManually}
-          loading={loading && actionType === 'payment'}
-          accountStats={accountStats}
-        />
-      )}
-      <ApolloWrapper uri={PoolSubgraphMap[chainId!]?.subgraph!}>
-        <SuperfluidUpcomingList
-          poolInfo={poolInfo}
-          handleGetPaid={handleGetPaid}
-          hasActiveLoan={accountHasActiveLoan}
-          loading={loading && actionType === 'borrow'}
-        />
-      </ApolloWrapper>
-      <ApolloWrapper uri={PoolSubgraphMap[chainId!]?.subgraph}>
-        {poolInfo && (
-          <Activity
-            poolInfo={poolInfo}
-            targetEvents={[
-              CreditEvent.DrawdownMadeWithReceivable,
-              CreditEvent.PaymentMade,
-              CreditEvent.ReceivedPaymentProcessed,
-            ]}
-          />
-        )}
-      </ApolloWrapper>
-      {poolInfo && selectedItem && actionType === 'borrow' && (
-        <StreamFactoringBorrow
-          poolName={POOL_NAME.Superfluid}
-          poolType={POOL_TYPE.Stream}
-          payerAddress={selectedItem.payer}
-          superToken={selectedItem.tokenId}
-          currentFlowRate={selectedItem.flowrate}
-          isOpen={modalIsOpen}
-          handleClose={handleClose}
-          handleSuccess={handleGetPaidSuccess}
-        />
-      )}
-    </Box>
-  )
-}
+import { Box } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditEvent,
+  POOL_NAME,
+  POOL_TYPE,
+  PoolMap,
+  PoolSubgraphMap,
+  useFactoring,
+} from '@huma-finance/shared'
+import React from 'react'
+
+import { Activity } from '../Activity'
+import { ApolloWrapper } from '../ApolloWrapper'
+import { StreamFactoringBorrow } from '../StreamFactoring/borrow'
+import { SuperfluidFactoredList } from './SuperfluidFactoredList'
+import { StreamItem, SuperfluidUpcomingList } from './SuperfluidUpcomingList'
+
+export function SuperfluidFactoring(): React.ReactElement {
+  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)
+
+  return (
+    <Box css={styles.wrapper}>
+      <Box css={styles.title}>Stream Factoring</Box>
+      <Box css={styles.description} marginBottom='47px'>
+        {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={PoolSubgraphMap[chainId!]?.subgraph}>
+        {poolInfo && (
+          <Activity
+            poolInfo={poolInfo}
+            targetEvents={[
+              CreditEvent.DrawdownMadeWithReceivable,
+              CreditEvent.PaymentMade,
+              CreditEvent.ReceivedPaymentProcessed,
+            ]}
+          />
+        )}
+      </ApolloWrapper>
+      {poolInfo && selectedItem && actionType === 'borrow' && (
+        <StreamFactoringBorrow
+          poolName={POOL_NAME.Superfluid}
+          poolType={POOL_TYPE.Stream}
+          payerAddress={selectedItem.payer}
+          superToken={selectedItem.tokenId}
+          currentFlowRate={selectedItem.flowrate}
+          isOpen={modalIsOpen}
+          handleClose={handleClose}
+          handleSuccess={handleGetPaidSuccess}
+        />
+      )}
+    </Box>
+  )
+}

package/src/components/TxDoneModal.tsx

@@ -10,11 +10,13 @@ import { CheckIcon } from './icons'
 type Props = {
   content: string[]
   handleAction: () => void
+  buttonText?: string
 }
 
 export function TxDoneModal({
   content,
   handleAction,
+  buttonText,
 }: Props): React.ReactElement {
   const theme = useTheme()
   const dispatch = useAppDispatch()
@@ -76,7 +78,7 @@ export function TxDoneModal({
         css={styles.doneButton}
         onClick={handleCloseModal}
       >
-        DONE
+        {buttonText == null ? 'DONE' : buttonText}
       </Button>
     </Box>
   )