@huma-finance/widgets 0.0.59-beta.489 → 0.0.59-beta.492

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

@@ -1,37 +1,47 @@
 import {
+  CampaignService,
+  checkIsDev,
+  formatNumber,
   PoolInfoV2,
   TrancheType,
   UnderlyingTokenInfo,
-  formatNumber,
-  useLPConfigV2,
+  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 { LoadingModal } from '../../LoadingModal'
+import { Campaign } from '.'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
+  isUniTranche: boolean
+  campaign?: Campaign
 }
 
 export function ChooseAmount({
   poolInfo,
   poolUnderlyingToken,
   selectedTranche,
+  isUniTranche,
+  campaign,
 }: Props): React.ReactElement | null {
+  const isDev = checkIsDev()
   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,
@@ -46,8 +56,40 @@ export function ChooseAmount({
     balance,
     poolUnderlyingToken.decimals,
   )
-  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
-  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
+
+  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(),
+          isDev,
+        )
+        const campaignPoints = estimatedPoints.find(
+          (item) => item.campaignId === campaign.id,
+        )
+        if (campaignPoints) {
+          setCampaignPoints(campaignPoints[`${selectedTranche}TranchePoints`])
+          setLockupPeriodMonths(campaignPoints.lockupPeriodMonths)
+        }
+      } else {
+        setCampaignPoints(0)
+      }
+    }
+    getBasePoints()
+  }, [
+    campaign,
+    debouncedValue,
+    decimals,
+    isDev,
+    poolInfo.poolUnderlyingToken.decimals,
+    selectedTranche,
+  ])
 
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
@@ -65,8 +107,11 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
-  if (!lpConfig) {
-    return <LoadingModal title='Supply' />
+  let info = `${formatNumber(maxAmountFormatted)} Available`
+  if (campaign && campaignPoints > 0) {
+    info = `You will earn ${formatNumber(
+      campaignPoints,
+    )} points for the entire ${lockupPeriodMonths} months right away.`
   }
 
   return (
@@ -79,7 +124,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,219 @@
+import {
+  CampaignService,
+  checkIsDev,
+  formatNumber,
+  useAuthErrorHandling,
+} 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'
+import { SignIn } from '../../SignIn'
+
+enum STATE {
+  Loading = 'Loading',
+  SignIn = 'SignIn',
+  Congrats = 'Congrats',
+}
+
+const ERROR_MESSAGE =
+  'Failed to update wallet points. Be assured that your points will be added later.'
+
+type Props = {
+  transactionHash: string
+  lpConfig: { withdrawalLockoutPeriodInDays: number }
+  handleAction: () => void
+}
+
+export function PointsEarned({
+  transactionHash,
+  lpConfig,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useDispatch()
+  const { account, chainId } = useWeb3React()
+  const [pointsAccumulated, setPointsAccumulated] = useState<
+    number | undefined
+  >()
+  const lockupMonths = Math.round(lpConfig.withdrawalLockoutPeriodInDays / 30)
+  const monthText =
+    lockupMonths > 1 ? `${lockupMonths} months` : `${lockupMonths} month`
+
+  const {
+    errorType,
+    setError: setAuthError,
+    isWalletOwnershipVerified,
+    isWalletOwnershipVerificationRequired,
+  } = useAuthErrorHandling(isDev)
+  const [walletOwnership, setWalletOwnership] = useState<boolean | undefined>()
+  const [state, setState] = useState<STATE>(STATE.Loading)
+
+  useEffect(() => {
+    if (isWalletOwnershipVerificationRequired) {
+      setState(STATE.Loading)
+    }
+  }, [isWalletOwnershipVerificationRequired])
+
+  useEffect(() => {
+    if (isWalletOwnershipVerified) {
+      setWalletOwnership(true)
+    }
+  }, [isWalletOwnershipVerified])
+
+  useEffect(() => {
+    const checkWalletOwnership = async () => {
+      const ownership = await CampaignService.checkWalletOwnership(
+        account!,
+        isDev,
+      )
+      setWalletOwnership(ownership)
+      if (!ownership) {
+        setAuthError('WalletNotSignInException')
+      }
+    }
+    checkWalletOwnership()
+  }, [account, isDev, setAuthError])
+
+  useEffect(() => {
+    if (errorType === 'NotSignedIn') {
+      setState(STATE.SignIn)
+    } else if (errorType === 'UserRejected') {
+      dispatch(
+        setError({
+          errorMessage: 'User has rejected the transaction.',
+        }),
+      )
+    } else if (errorType === 'Other') {
+      dispatch(
+        setError({
+          errorMessage: ERROR_MESSAGE,
+        }),
+      )
+    }
+  }, [dispatch, errorType])
+
+  useEffect(() => {
+    const updateWalletPoints = async () => {
+      if (walletOwnership) {
+        try {
+          const result = await CampaignService.updateWalletPoints(
+            chainId!,
+            account!,
+            transactionHash,
+            isDev,
+          )
+          if (!result.pointsAccumulated) {
+            dispatch(
+              setError({
+                errorMessage: ERROR_MESSAGE,
+              }),
+            )
+          }
+          setPointsAccumulated(result.pointsAccumulated)
+          setState(STATE.Congrats)
+        } catch (error) {
+          dispatch(
+            setError({
+              errorMessage: ERROR_MESSAGE,
+            }),
+          )
+        }
+      }
+    }
+    updateWalletPoints()
+  }, [account, chainId, dispatch, isDev, transactionHash, walletOwnership])
+
+  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-weight: 700;
+      margin-top: ${theme.spacing(-8)};
+      color: ${theme.palette.text.primary};
+      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-weight: 700;
+      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-weight: 400;
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(4)};
+    `,
+    everyday: css`
+      font-weight: 700;
+    `,
+  }
+
+  if (state === STATE.SignIn) {
+    return (
+      <SignIn description='Please sign in to check the points that you earned.' />
+    )
+  }
+
+  if (state === STATE.Congrats) {
+    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>
+    )
+  }
+
+  return <LoadingModal title='SUPPLY' />
+}