@huma-finance/widgets 0.0.62-beta.700 → 0.0.62-beta.701

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.700+f236201",
+  "version": "0.0.62-beta.701+5d2620c",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.700+f236201",
-    "@huma-finance/shared": "^0.0.62-beta.700+f236201",
+    "@huma-finance/sdk": "^0.0.62-beta.701+5d2620c",
+    "@huma-finance/shared": "^0.0.62-beta.701+5d2620c",
     "@huma-finance/web-shared": "^0.0.61",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
@@ -203,5 +203,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "f2362011ab87d368880bb82f50f841a227326f35"
+  "gitHead": "5d2620cc8d54da4495cf4fffcf1bfb4a44860231"
 }

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

@@ -3,6 +3,7 @@ import {
   CampaignService,
   CHAIN_TYPE,
   checkIsDev,
+  CloseModalOptions,
   IdentityServiceV2,
   IdentityVerificationStatusV2,
   KYCCopy,
@@ -38,7 +39,7 @@ type Props = {
   campaign?: Campaign
   chainSpecificData?: Record<string, unknown>
   changeTranche: (tranche: TrancheType) => void
-  handleClose: (identityStatus?: IdentityVerificationStatusV2) => void
+  handleClose: (options?: CloseModalOptions) => void
 }
 
 export function PersonaEvaluation({
@@ -377,11 +378,11 @@ export function PersonaEvaluation({
         case IdentityVerificationStatusV2.DECLINED:
         case IdentityVerificationStatusV2.NEEDS_REVIEW:
         case IdentityVerificationStatusV2.APPROVED:
-          handleClose(verificationStatus.status)
+          handleClose({ identityStatus: verificationStatus.status })
           break
 
         case IdentityVerificationStatusV2.BYPASSED:
-          handleClose(IdentityVerificationStatusV2.APPROVED)
+          handleClose({ identityStatus: IdentityVerificationStatusV2.APPROVED })
           break
 
         default:

package/src/components/Lend/solanaSupply/5-Success.tsx

@@ -1,4 +1,9 @@
-import { formatMoney, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
+import {
+  CloseModalOptions,
+  formatMoney,
+  SolanaPoolInfo,
+  timeUtil,
+} from '@huma-finance/shared'
 import { SolanaPoolState } from '@huma-finance/web-shared'
 import dayjs from 'dayjs'
 import React, { useCallback } from 'react'
@@ -14,7 +19,7 @@ type Props = {
   poolInfo: SolanaPoolInfo
   poolState: SolanaPoolState
   campaign?: Campaign
-  handleAction: () => void
+  handleAction: (options?: CloseModalOptions) => void
 }
 
 export function Success({
@@ -49,7 +54,7 @@ export function Success({
     if (campaign) {
       dispatch(setStep(WIDGET_STEP.PointsEarned))
     } else {
-      handleAction()
+      handleAction({ isSuccess: true })
     }
   }, [campaign, dispatch, handleAction])
 

package/src/components/Lend/solanaSupply/6-PointsEarned.tsx

@@ -0,0 +1,250 @@
+import {
+  CampaignService,
+  CHAIN_TYPE,
+  checkIsDev,
+  CloseModalOptions,
+  formatNumber,
+  isEmpty,
+} from '@huma-finance/shared'
+import {
+  SolanaPoolState,
+  txAtom,
+  useAuthErrorHandling,
+  useChainInfo,
+} from '@huma-finance/web-shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { resetState, 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
+  poolState: SolanaPoolState
+  pointsTestnetExperience: boolean
+  handleAction: (options?: CloseModalOptions) => void
+}
+
+export function PointsEarned({
+  transactionHash,
+  poolState,
+  pointsTestnetExperience,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useDispatch()
+  const reset = useResetAtom(txAtom)
+  const { account, chainId } = useChainInfo(isDev, CHAIN_TYPE.SOLANA)
+  const [pointsAccumulated, setPointsAccumulated] = useState<
+    number | undefined
+  >()
+  const hasPointsAccumulated =
+    !isEmpty(pointsAccumulated) && pointsAccumulated! > 0
+  const lockupMonths = Math.round(
+    poolState.withdrawalLockupPeriodDays ?? 0 / 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 () => {
+      if (account) {
+        const ownership = await CampaignService.checkWalletOwnership(
+          account,
+          isDev,
+          pointsTestnetExperience,
+        )
+        setWalletOwnership(ownership)
+        if (!ownership) {
+          setAuthError('WalletNotSignInException')
+        }
+      }
+    }
+    checkWalletOwnership()
+  }, [account, isDev, pointsTestnetExperience, 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(
+            account!,
+            transactionHash,
+            chainId!,
+            isDev,
+            pointsTestnetExperience,
+          )
+          setPointsAccumulated(result.pointsAccumulated)
+          setState(STATE.Congrats)
+        } catch (error) {
+          console.error('Failed to update wallet points', error)
+        }
+      }
+    }
+    updateWalletPoints()
+  }, [
+    account,
+    chainId,
+    dispatch,
+    isDev,
+    pointsTestnetExperience,
+    transactionHash,
+    walletOwnership,
+  ])
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleAction({ isSuccess: true })
+  }, [dispatch, handleAction, reset])
+
+  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>
+              {hasPointsAccumulated
+                ? `${formatNumber(pointsAccumulated)} Points`
+                : 'Points earned'}
+            </Box>
+          </Box>
+        </Box>
+        <Box css={styles.entirePoints}>
+          {hasPointsAccumulated ? (
+            <>
+              <Box>Congratulations,</Box>
+              <Box>you've earned {pointsAccumulated} points</Box>
+            </>
+          ) : (
+            <Box>Congratulations on joining the Huma Protocol!</Box>
+          )}
+        </Box>
+        <Box css={styles.entirePointsDetails}>
+          You'll earn points <span css={styles.everyday}>everyday</span> for{' '}
+          {monthText} straight.
+        </Box>
+        <BottomButton variant='contained' onClick={handleCloseModal}>
+          GREAT
+        </BottomButton>
+      </Box>
+    )
+  }
+
+  return <LoadingModal title='SUPPLY' />
+}

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

@@ -1,4 +1,8 @@
-import { SolanaPoolInfo, TrancheType } from '@huma-finance/shared'
+import {
+  CloseModalOptions,
+  SolanaPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
 import {
   SolanaPoolState,
   useLenderAccounts,
@@ -31,14 +35,14 @@ export interface Campaign {
  * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
  * @property {SolanaPoolState} poolState The current state config of the pool.
  * @property {boolean} pointsTestnetExperience If the user is in the testnet experience.
- * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
  * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
  */
 export interface SolanaLendSupplyProps {
   poolInfo: SolanaPoolInfo
   poolState: SolanaPoolState
   pointsTestnetExperience: boolean
-  handleClose: () => void
+  handleClose: (options?: CloseModalOptions) => void
   handleSuccess?: () => void
 }
 

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

@@ -1,4 +1,9 @@
-import { CHAIN_TYPE, PoolInfoV2, TrancheType } from '@huma-finance/shared'
+import {
+  CHAIN_TYPE,
+  CloseModalOptions,
+  PoolInfoV2,
+  TrancheType,
+} from '@huma-finance/shared'
 import React from 'react'
 
 import { Campaign } from '.'
@@ -11,7 +16,7 @@ type Props = {
   pointsTestnetExperience: boolean
   campaign?: Campaign
   changeTranche: (tranche: TrancheType) => void
-  handleClose: () => void
+  handleClose: (options?: CloseModalOptions) => void
 }
 
 export function Evaluation({

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

@@ -1,5 +1,5 @@
 import {
-  IdentityVerificationStatusV2,
+  CloseModalOptions,
   openInNewTab,
   POOL_NAME,
   TrancheType,
@@ -40,14 +40,14 @@ export interface Campaign {
  * @property {POOL_NAME} poolName The name of the pool.
  * @property {boolean} pointsTestnetExperience If the user is in the testnet experience.
  * @property {Campaign} campaign The campaign info.
- * @property {function((IdentityVerificationStatusV2|undefined)):void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
  * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
  */
 export interface LendSupplyPropsV2 {
   poolName: keyof typeof POOL_NAME
   pointsTestnetExperience: boolean
   campaign?: Campaign
-  handleClose: (identityStatus?: IdentityVerificationStatusV2) => void
+  handleClose: (options?: CloseModalOptions) => void
   handleSuccess?: (blockNumber?: number) => void
 }
 

package/src/components/SolanaTxDoneModal.tsx

@@ -19,10 +19,10 @@ type Props = {
 export function SolanaTxDoneModal({
   content,
   subContent,
-  handleAction,
   solanaSignature,
   chainId,
   buttonText,
+  handleAction,
 }: Props): React.ReactElement {
   const theme = useTheme()
   const dispatch = useAppDispatch()