@huma-finance/widgets 0.0.59-beta.482 → 0.0.59-beta.484

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.59-beta.482+ea53a78",
+  "version": "0.0.59-beta.484+cd874d1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.58",
-    "@huma-finance/shared": "^0.0.58",
+    "@huma-finance/sdk": "^0.0.59-beta.484+cd874d1",
+    "@huma-finance/shared": "^0.0.59-beta.484+cd874d1",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -195,5 +195,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "ea53a78ba1ad057a3ec46b7c49a27f368842e8b5"
+  "gitHead": "cd874d11bcdeb78aacd815589f76c482e8bfdf78"
 }

package/src/components/InputAmountModal.tsx

@@ -88,8 +88,8 @@ export function InputAmountModal({
     `,
     info: css`
       color: ${theme.palette.text.primary};
-      font-family: 'Uni-Neue-Bold';
-      font-size: 20px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
       line-height: 160%;
       letter-spacing: 0.15px;
     `,

package/src/components/Lend/supplyV2/2-Evaluation.tsx

@@ -1,12 +1,16 @@
 import { PoolInfoV2, TrancheType } from '@huma-finance/shared'
+import { BigNumber } from 'ethers'
 import React from 'react'
 
+import { Campaign } from '.'
 import { PersonaEvaluation } from './components/PersonaEvaluation'
 import { SecuritizeEvaluation } from './components/SecuritizeEvaluation'
 
 type Props = {
   poolInfo: PoolInfoV2
   isUniTranche: boolean
+  minDepositAmount: BigNumber
+  campaign?: Campaign
   changeTranche: (tranche: TrancheType) => void
   handleClose: () => void
 }
@@ -14,6 +18,8 @@ type Props = {
 export function Evaluation({
   poolInfo,
   isUniTranche,
+  minDepositAmount,
+  campaign,
   changeTranche,
   handleClose,
 }: Props): React.ReactElement | null {
@@ -28,6 +34,8 @@ export function Evaluation({
         poolInfo={poolInfo}
         handleClose={handleClose}
         isUniTranche={isUniTranche}
+        campaign={campaign}
+        minDepositAmount={minDepositAmount}
         changeTranche={changeTranche}
       />
     )

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -1,25 +1,29 @@
 import {
+  CampaignService,
   formatNumber,
   PoolInfoV2,
   TrancheType,
   UnderlyingTokenInfo,
+  useDebouncedValue,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
+import { Campaign } from '.'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
   isUniTranche: boolean
+  campaign?: Campaign
 }
 
 export function ChooseAmount({
@@ -27,11 +31,15 @@ export function ChooseAmount({
   poolUnderlyingToken,
   selectedTranche,
   isUniTranche,
+  campaign,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+  const debouncedValue = useDebouncedValue(currentAmount)
+  const [campaignPoints, setCampaignPoints] = useState<number>(0)
+  const [lockupPeriodMonths, setLockupPeriodMonths] = useState<number>(0)
   const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
     poolInfo.poolName,
     account,
@@ -47,6 +55,36 @@ export function ChooseAmount({
     poolUnderlyingToken.decimals,
   )
 
+  useEffect(() => {
+    const getBasePoints = async () => {
+      if (campaign && selectedTranche && Number(debouncedValue) > 0) {
+        const estimatedPoints = await CampaignService.getEstimatedPoints(
+          campaign.campaignGroupId,
+          ethers.utils
+            .parseUnits(
+              String(debouncedValue),
+              poolInfo.poolUnderlyingToken.decimals,
+            )
+            .toString(),
+        )
+        const campaignPoints = estimatedPoints.find(
+          (item) => item.campaignId === campaign.id,
+        )
+        if (campaignPoints) {
+          setCampaignPoints(campaignPoints[`${selectedTranche}TranchePoints`])
+          setLockupPeriodMonths(campaignPoints.lockupPeriodMonths)
+        }
+      }
+    }
+    getBasePoints()
+  }, [
+    campaign,
+    debouncedValue,
+    decimals,
+    poolInfo.poolUnderlyingToken.decimals,
+    selectedTranche,
+  ])
+
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
     dispatch(setSupplyAmount(Number(newAmount)))
@@ -63,6 +101,13 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
+  let info = `${formatNumber(maxAmountFormatted)} Available`
+  if (campaign && campaignPoints > 0) {
+    info = `You will earn ${formatNumber(
+      campaignPoints,
+    )} points for the entire ${lockupPeriodMonths} months right away.`
+  }
+
   return (
     <InputAmountModal
       title='Enter Amount'
@@ -73,7 +118,7 @@ export function ChooseAmount({
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
       maxAmount={maxAmountFormatted}
-      info={`${formatNumber(maxAmountFormatted)} Available`}
+      info={info}
       handleAction={handleAction}
       actionText='SUPPLY'
     />

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

@@ -4,11 +4,13 @@ import {
   formatMoney,
   PoolInfoV2,
   sendTxAtom,
+  timeUtil,
   TRANSFER_ABI,
   UnderlyingTokenInfo,
 } from '@huma-finance/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'
 
@@ -16,24 +18,31 @@ import {
   useDoesChainSupportNotifi,
   useIsFirstTimeNotifiUser,
 } from '../../../hooks/useNotifi'
-import { TxDoneModal } from '../../TxDoneModal'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
+import { TxDoneModal } from '../../TxDoneModal'
+import { Campaign } from '.'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
+  lpConfig: { withdrawalLockoutPeriodInDays: number }
+  campaign?: Campaign
+  updateTransactionHash: (hash: string) => void
   handleAction: () => void
 }
 
 export function Success({
   poolInfo,
   poolUnderlyingToken,
+  lpConfig,
+  campaign,
+  updateTransactionHash,
   handleAction,
 }: Props): React.ReactElement {
   const dispatch = useDispatch()
   const { account, chainId } = useWeb3React()
-  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const [{ txReceipt, txHash }] = useAtom(sendTxAtom)
   const { symbol, decimals, address } = poolUnderlyingToken
   const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
@@ -57,23 +66,57 @@ export function Success({
     }
   }, [account, address, decimals, poolInfo.poolSafe, txReceipt])
 
-  const setupNotificationsOrClose = useCallback(() => {
+  useEffect(() => {
+    if (txHash) {
+      updateTransactionHash(txHash)
+    }
+  }, [txHash, updateTransactionHash])
+
+  const handleUserAction = useCallback(() => {
     if (isFirstTimeNotifiUser && notifiChainSupported) {
       dispatch(setStep(WIDGET_STEP.Notifications))
+    } else if (campaign) {
+      dispatch(setStep(WIDGET_STEP.PointsEarned))
     } else {
       handleAction()
     }
-  }, [dispatch, handleAction, isFirstTimeNotifiUser, notifiChainSupported])
+  }, [
+    campaign,
+    dispatch,
+    handleAction,
+    isFirstTimeNotifiUser,
+    notifiChainSupported,
+  ])
 
   const content = [
     `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
   ]
 
+  const getSubContent = () => {
+    const currentTime = moment().add(
+      lpConfig.withdrawalLockoutPeriodInDays,
+      'days',
+    )
+    return [
+      `First redemption date: ${timeUtil.timestampToLL(
+        currentTime.unix(),
+      )}. You can redeem end of each month after.`,
+    ]
+  }
+
+  const getButtonText = () => {
+    if (hasNextStep) {
+      return "WHAT'S NEXT"
+    }
+    return campaign ? 'VIEW POINTS' : undefined
+  }
+
   return (
     <TxDoneModal
-      handleAction={setupNotificationsOrClose}
+      handleAction={handleUserAction}
       content={content}
-      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+      subContent={getSubContent()}
+      buttonText={getButtonText()}
     />
   )
 }

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

@@ -1,10 +1,29 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { Campaign } from '.'
 import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
 
 type Props = {
+  campaign?: Campaign
   handleAction: () => void
 }
 
-export function Notifications({ handleAction }: Props): React.ReactElement {
-  return <NotifiSubscriptionModal handleSuccess={handleAction} />
+export function Notifications({
+  campaign,
+  handleAction,
+}: Props): React.ReactElement {
+  const dispatch = useDispatch()
+
+  const handleUserAction = useCallback(() => {
+    if (campaign) {
+      dispatch(setStep(WIDGET_STEP.PointsEarned))
+    } else {
+      handleAction()
+    }
+  }, [campaign, dispatch, handleAction])
+
+  return <NotifiSubscriptionModal handleSuccess={handleUserAction} />
 }

package/src/components/Lend/supplyV2/8-PointsEarned.tsx

@@ -0,0 +1,145 @@
+import { CampaignService, formatNumber } from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { setError } from '../../../store/widgets.reducers'
+import { BottomButton } from '../../BottomButton'
+import { CongratulationsIcon, HumaPointsIcon, RibbonIcon } from '../../icons'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  transactionHash: string
+  lpConfig: { withdrawalLockoutPeriodInDays: number }
+  handleAction: () => void
+}
+
+export function PointsEarned({
+  transactionHash,
+  lpConfig,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useDispatch()
+  const { account, chainId } = useWeb3React()
+  const [pointsAccumulated, setPointsAccumulated] = useState<
+    number | undefined
+  >()
+  const lockupMonths = lpConfig.withdrawalLockoutPeriodInDays / 30
+  const monthText =
+    lockupMonths > 1 ? `${lockupMonths} months` : `${lockupMonths} month`
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const updateWalletPoints = async () => {
+      const setErrorMessage = () => {
+        dispatch(
+          setError({
+            errorMessage:
+              'Failed to update wallet points. Be assured that your points will be added later.',
+          }),
+        )
+      }
+
+      try {
+        setLoading(true)
+        const result = await CampaignService.updateWalletPoints(
+          chainId!,
+          account!,
+          transactionHash,
+        )
+        if (!result.pointsAccumulated) {
+          setErrorMessage()
+        }
+        setPointsAccumulated(result.pointsAccumulated)
+      } catch (error) {
+        setErrorMessage()
+      } finally {
+        setLoading(false)
+      }
+    }
+    updateWalletPoints()
+  }, [account, chainId, dispatch, transactionHash])
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    congrats: css`
+      margin: ${theme.spacing(-4, -4.5, 0, -4.5)};
+    `,
+    ribbon: css`
+      position: relative;
+      ${theme.cssMixins.rowHCentered};
+      font-family: 'Uni-Neue-Bold';
+      margin-top: ${theme.spacing(-8)};
+      color: #fbfbfc;
+      font-size: 20px;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+    `,
+    ribbonContent: css`
+      ${theme.cssMixins.rowVCentered};
+      position: absolute;
+      top: ${theme.spacing(1)};
+
+      svg {
+        margin-right: ${theme.spacing(1)};
+      }
+    `,
+    entirePoints: css`
+      color: ${theme.palette.text.tertiary};
+      text-align: center;
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(7)};
+    `,
+    entirePointsDetails: css`
+      color: ${theme.palette.text.tertiary};
+      text-align: center;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(4)};
+    `,
+    everyday: css`
+      font-family: 'Uni-Neue-Bold';
+    `,
+  }
+
+  if (loading) {
+    return <LoadingModal title='SUPPLY' />
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Box css={styles.congrats}>
+        <CongratulationsIcon />
+      </Box>
+      <Box css={styles.ribbon}>
+        <RibbonIcon />
+        <Box css={styles.ribbonContent}>
+          <HumaPointsIcon />
+          <Box>{formatNumber(pointsAccumulated)} Points</Box>
+        </Box>
+      </Box>
+      <Box css={styles.entirePoints}>
+        <Box>Congratulations,</Box>
+        <Box>you've earned {pointsAccumulated} points</Box>
+      </Box>
+      <Box css={styles.entirePointsDetails}>
+        You'll earn points <span css={styles.everyday}>everyday</span> for{' '}
+        {monthText} straight. Plus, If you keep your investment till after{' '}
+        {monthText}, you’ll gain extra points daily.
+      </Box>
+      <BottomButton variant='contained' onClick={handleAction}>
+        GREAT
+      </BottomButton>
+    </Box>
+  )
+}

package/src/components/Lend/supplyV2/components/PersonaEvaluation.tsx

@@ -1,5 +1,8 @@
 import {
+  CAMPAIGN_REFERENCE_CODE,
+  CampaignService,
   checkIsDev,
+  formatNumber,
   IdentityServiceV2,
   IdentityVerificationStatusV2,
   KYCCopy,
@@ -10,16 +13,20 @@ import {
 } from '@huma-finance/shared'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import Persona, { Client } from 'persona'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-import Persona, { Client } from 'persona'
+import { Campaign } from '..'
 import { useAppDispatch } from '../../../../hooks/useRedux'
 import { setError, setStep } from '../../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../../store/widgets.store'
 import { BottomButton } from '../../../BottomButton'
 import { ApproveLenderImg } from '../../../images'
 import { LoadingModal } from '../../../LoadingModal'
 import { WrapperModal } from '../../../WrapperModal'
-import { WIDGET_STEP } from '../../../../store/widgets.store'
+
+type LoadingType = 'verificationStatus' | 'startKYC' | 'approveLender'
 
 const LoadingCopiesByType: {
   [key: string]: {
@@ -40,6 +47,8 @@ const LoadingCopiesByType: {
 type Props = {
   poolInfo: PoolInfoV2
   isUniTranche: boolean
+  minDepositAmount: BigNumber
+  campaign?: Campaign
   changeTranche: (tranche: TrancheType) => void
   handleClose: () => void
 }
@@ -47,6 +56,8 @@ type Props = {
 export function PersonaEvaluation({
   poolInfo,
   isUniTranche,
+  minDepositAmount: minDepositAmountBN,
+  campaign,
   changeTranche,
   handleClose,
 }: Props): React.ReactElement | null {
@@ -61,20 +72,58 @@ export function PersonaEvaluation({
     isWalletOwnershipVerificationRequired,
   } = useAuthErrorHandling(isDev)
   const KYCCopies = poolInfo.KYC!.Persona!
-  const [loadingType, setLoadingType] = useState<
-    'verificationStatus' | 'startKYC' | 'approveLender' | undefined
-  >()
+  const [loadingType, setLoadingType] = useState<LoadingType>()
   const [kycCopy, setKYCCopy] = useState<KYCCopy>(KYCCopies.verifyIdentity)
-  const [inquiryId, setInquiryId] = useState<string | undefined>()
-  const [sessionToken, setSessionToken] = useState<string | undefined>()
-  const [verificationStatus, setVerificationStatus] = useState<
-    VerificationStatusResultV2 | undefined
-  >()
+  const isVerifyIdentity = kycCopy === KYCCopies.verifyIdentity
+  const [inquiryId, setInquiryId] = useState<string>()
+  const [sessionToken, setSessionToken] = useState<string>()
+  const [verificationStatus, setVerificationStatus] =
+    useState<VerificationStatusResultV2>()
   const [showPersonaClient, setShowPersonaClient] = useState<boolean>(false)
+  const [campaignBasePoints, setCampaignBasePoints] = useState<number>(0)
   const isKYCCompletedRef = useRef<boolean>(false)
   const isActionOngoingRef = useRef<boolean>(false)
   const isKYCResumedRef = useRef<boolean>(false)
 
+  useEffect(() => {
+    const createNewWallet = async () => {
+      if (isWalletOwnershipVerified && campaign && account) {
+        await CampaignService.createNewWallet(
+          account,
+          localStorage.getItem(CAMPAIGN_REFERENCE_CODE) ?? undefined,
+        )
+      }
+    }
+    createNewWallet()
+  }, [account, campaign, isWalletOwnershipVerified])
+
+  useEffect(() => {
+    const getBasePoints = async () => {
+      if (campaign) {
+        const estimatedPoints = await CampaignService.getEstimatedPoints(
+          campaign.campaignGroupId,
+          minDepositAmountBN.toString(),
+        )
+        const campaignPoints = estimatedPoints.find(
+          (item) => item.campaignId === campaign.id,
+        )
+        if (campaignPoints) {
+          const { juniorTranchePoints, seniorTranchePoints } = campaignPoints
+          if (isUniTranche) {
+            setCampaignBasePoints(juniorTranchePoints ?? 0)
+          } else {
+            setCampaignBasePoints(
+              juniorTranchePoints < seniorTranchePoints
+                ? juniorTranchePoints
+                : seniorTranchePoints,
+            )
+          }
+        }
+      }
+    }
+    getBasePoints()
+  }, [campaign, isUniTranche, minDepositAmountBN])
+
   const approveLender = useCallback(async () => {
     try {
       isActionOngoingRef.current = true
@@ -327,13 +376,17 @@ export function PersonaEvaluation({
       }
     `,
     description: css`
-      ${theme.cssMixins.rowCentered};
+      text-align: justify;
       margin-top: ${theme.spacing(10)};
       padding: ${theme.spacing(0, 2)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;
     `,
+    points: css`
+      color: #b246ff;
+      font-family: 'Uni-Neue-Bold';
+    `,
   }
 
   if (!loadingType) {
@@ -342,7 +395,19 @@ export function PersonaEvaluation({
         <Box css={styles.iconWrapper}>
           <img src={ApproveLenderImg} alt='approve-lender' />
         </Box>
-        <Box css={styles.description}>{kycCopy.description}</Box>
+        {campaign && isVerifyIdentity ? (
+          <Box css={styles.description}>
+            <span>You’ll be rewarded with a minimum of</span>
+            <span css={styles.points}>
+              {' '}
+              {formatNumber(campaignBasePoints)} Huma points{' '}
+            </span>
+            <span>after completing KYC and your first investment.</span>
+          </Box>
+        ) : (
+          <Box css={styles.description}>{kycCopy.description}</Box>
+        )}
+
         {Boolean(kycCopy.buttonText) && (
           <BottomButton variant='contained' onClick={handleAction}>
             {kycCopy.buttonText}