@huma-finance/widgets 0.0.30 → 0.0.32

package/src/hooks/useNotifi.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import {
+  doesChainSupportNotifi,
+  getBlockchainConfigFromChain,
+} from '@huma-finance/shared'
+import { newFrontendClient } from '@notifi-network/notifi-frontend-client'
+import { envUtil } from '../utils/env'
+
+export const useIsFirstTimeNotifiUser = (
+  account: string | undefined,
+  chainId: number | undefined,
+) => {
+  const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
+
+  useEffect(() => {
+    const checkIsFirstTimeNotifiUser = async () => {
+      if (account != null && chainId != null) {
+        const client = newFrontendClient({
+          account: { publicKey: account },
+          tenantId: 'humadapp',
+          env: envUtil.checkIsDev() ? 'Development' : 'Production',
+          walletBlockchain: getBlockchainConfigFromChain(chainId),
+        })
+
+        const userState = await client.initialize()
+
+        // If the user is not authenticated or expired, they are a first time user
+        if (
+          userState.status !== 'authenticated' &&
+          userState.status !== 'expired'
+        ) {
+          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 client.getTargetGroups()
+          const emailTargets = targetGroups[0]?.emailTargets?.[0]
+
+          if (emailTargets == null || emailTargets.emailAddress == null) {
+            setIsFirstTimeNotifiUser(true)
+          }
+        }
+      }
+    }
+
+    checkIsFirstTimeNotifiUser()
+  }, [account, chainId])
+
+  return { isFirstTimeNotifiUser }
+}
+
+export const useDoesChainSupportNotifi = (
+  account: string | undefined,
+  chainId: number | undefined,
+) => {
+  const [notifiChainSupported, setNotifiChainSupported] = useState(false)
+
+  useEffect(() => {
+    const checkNotifiChainSupported = async () => {
+      if (account != null && chainId != null) {
+        setNotifiChainSupported(
+          doesChainSupportNotifi(chainId, envUtil.checkIsDev(), account),
+        )
+      }
+    }
+
+    checkNotifiChainSupported()
+  }, [account, chainId])
+
+  return { notifiChainSupported }
+}

package/src/store/widgets.store.ts

@@ -15,6 +15,7 @@ export enum WIDGET_STEP {
   ApproveNFT = 'ApproveNFT',
   Transfer = 'Transfer',
   CheckWithdrawable = 'CheckWithdrawable',
+  Notifications = 'Notifications',
   Done = 'Done',
   Error = 'Error',
 }

package/src/components/Lend/supply/1-Evaluation.tsx

@@ -1,171 +0,0 @@
-import {
-  EAService,
-  IdentityService,
-  PoolInfoType,
-  VerificationStatusResult,
-} from '@huma-finance/shared'
-import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import React, { useEffect, useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { CustomError } from '../../../utilTypes'
-import { BottomButton } from '../../BottomButton'
-import { ApproveLenderIcon } from '../../icons'
-import { LoadingModal } from '../../LoadingModal'
-import { WrapperModal } from '../../WrapperModal'
-import { envUtil } from '../../../utils/env'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleApproveSuccess: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleApproveSuccess,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const isDev = envUtil.checkIsDev()
-  const { account, chainId } = useWeb3React()
-  const [loading, setLoading] = useState(false)
-  const [description, setDescription] = useState<string>()
-  const [KYCVerifyStatus, setKYCVerifyStatus] =
-    useState<VerificationStatusResult>()
-  const lenderApprovalProvider = poolInfo.extra?.lenderApprovalProvider
-  const isKYC = lenderApprovalProvider?.type === 'KYC'
-  const [subTitle, setSubTitle] = useState<string>(
-    'This pool requires lender approval',
-  )
-  const [buttonText, setButtonText] = useState<string>('GET APPROVED')
-
-  const styles = {
-    iconWrapper: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 30px;
-    `,
-    description: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 50px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #a8a1b2;
-    `,
-  }
-
-  useEffect(() => {
-    if (isKYC) {
-      setDescription(
-        `Approval process is run by ${lenderApprovalProvider.provider}`,
-      )
-    }
-  }, [lenderApprovalProvider?.provider, isKYC])
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (account && chainId && isKYC) {
-        try {
-          setLoading(true)
-          const verificationStatus =
-            await IdentityService.getVerificationStatus(
-              account,
-              poolInfo.pool,
-              chainId,
-              isDev,
-            )
-          setKYCVerifyStatus(verificationStatus)
-          if (verificationStatus.isVerified) {
-            setSubTitle(
-              'Approval process in progress. Please contact Pool Owner.',
-            )
-            setButtonText('CONTACT POOL OWNER')
-          }
-        } finally {
-          setLoading(false)
-        }
-      }
-    }
-    fetchData()
-  }, [account, chainId, isDev, isKYC, poolInfo.pool])
-
-  const approveLenderByEA = async () => {
-    try {
-      setLoading(true)
-      const payload = {
-        poolAddress: poolInfo.pool,
-        lenderWalletAddress: account!,
-      }
-      await EAService.approveLender(payload, chainId!)
-      handleApproveSuccess()
-      setLoading(false)
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    } catch (e: unknown) {
-      const error = e as CustomError
-      setLoading(false)
-      dispatch(setError({ errorMessage: error.message }))
-    }
-  }
-
-  const approveLenderByKYC = () => {
-    switch (lenderApprovalProvider?.provider) {
-      case 'Securitize':
-        {
-          const issuerId = '53a66b32-583e-40e7-ba90-baf516d2cadd'
-          const baseUrl = `https://id${isDev ? '.sandbox' : ''}.securitize.io`
-          const originUrl = window.location.href.split('?')[0]
-          const redirectUrl = `${originUrl}?type=KYC&pool=${poolInfo.pool}`
-          const providerAuthorizeUrl = `${baseUrl}/#/authorize?issuerId=${issuerId}&scope=details&details=verification&redirectUrl=${redirectUrl}`
-          const { isNotOnboarded } = KYCVerifyStatus || {}
-          const providerUrl = isNotOnboarded ? providerAuthorizeUrl : baseUrl
-          window.location.href = providerUrl
-        }
-        break
-      default:
-        break
-    }
-  }
-
-  const approveLender = () => {
-    switch (lenderApprovalProvider?.type) {
-      case 'EA':
-        approveLenderByEA()
-        break
-      case 'KYC':
-        approveLenderByKYC()
-        break
-      default:
-        approveLenderByEA()
-        break
-    }
-  }
-
-  if (!loading) {
-    return (
-      <WrapperModal title='Lender Approval' subTitle={subTitle}>
-        <Box css={styles.iconWrapper}>
-          <ApproveLenderIcon />
-        </Box>
-        <Box css={styles.description}>{description}</Box>
-        {true && (
-          <BottomButton
-            variant='contained'
-            onClick={approveLender}
-            disabled={KYCVerifyStatus?.isVerified}
-          >
-            {buttonText}
-          </BottomButton>
-        )}
-      </WrapperModal>
-    )
-  }
-
-  return (
-    <LoadingModal
-      title='Approval Pending'
-      description='Waiting for approval confirmation...'
-    />
-  )
-}

package/src/components/Lend/supply/4-ConfirmTransfer.tsx

@@ -1,104 +0,0 @@
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { isEmpty } from '@huma-finance/shared'
-import React from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-export function ConfirmTransfer(): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-      ${theme.cssMixins.colStretch};
-    `,
-    header: css`
-      font-family: 'Uni-Neue-Bold';
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      margin-top: 30px;
-      text-align: center;
-    `,
-    transferWrapper: css`
-      margin-top: 75px;
-    `,
-    transfer: css`
-      font-family: 'Uni-Neue-Regular';
-      ${theme.cssMixins.rowSpaceBetweened}
-      ${theme.cssMixins.rowVCentered}
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      padding: 24px 32px;
-      margin-bottom: 9px;
-      position: relative;
-      box-sizing: border-box;
-    `,
-    arrow: css`
-      color: #d2d0d6;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    `,
-    okButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.ApproveNFT))
-  }
-
-  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
-    return null
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Confirm transaction details
-      </Typography>
-      <Box css={styles.description}>
-        Huma keeps your Invoice NFT as collateral until it's fully paid.
-      </Box>
-      <Box css={styles.transferWrapper}>
-        <Box css={styles.transfer}>
-          <Box>Invoice NFT</Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>Huma</Box>
-        </Box>
-        <Box css={styles.transfer}>
-          <Box>
-            {borrowAmountNet!} {approval?.token.symbol}
-          </Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>You</Box>
-        </Box>
-      </Box>
-      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
-        APPROVE TRANSFER
-      </Button>
-    </Box>
-  )
-}