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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.59-beta.484+cd874d1",
+  "version": "0.0.59-beta.486+2521877",
   "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.59-beta.484+cd874d1",
-    "@huma-finance/shared": "^0.0.59-beta.484+cd874d1",
+    "@huma-finance/sdk": "^0.0.58",
+    "@huma-finance/shared": "^0.0.58",
     "@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": "cd874d11bcdeb78aacd815589f76c482e8bfdf78"
+  "gitHead": "2521877d3ec21dd5c552804a945184da05dab0e0"
 }

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

@@ -1,4 +1,9 @@
-import { CampaignService, formatNumber } from '@huma-finance/shared'
+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'
@@ -8,6 +13,16 @@ 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
@@ -26,41 +41,89 @@ export function PointsEarned({
   const [pointsAccumulated, setPointsAccumulated] = useState<
     number | undefined
   >()
-  const lockupMonths = lpConfig.withdrawalLockoutPeriodInDays / 30
+  const lockupMonths = Math.round(lpConfig.withdrawalLockoutPeriodInDays / 30)
   const monthText =
     lockupMonths > 1 ? `${lockupMonths} months` : `${lockupMonths} month`
-  const [loading, setLoading] = useState(false)
+
+  const {
+    errorType,
+    setError: setAuthError,
+    isWalletOwnershipVerified,
+    isWalletOwnershipVerificationRequired,
+  } = useAuthErrorHandling(checkIsDev())
+  const [walletOwnership, setWalletOwnership] = useState<boolean | undefined>()
+  const [state, setState] = useState<STATE>(STATE.Loading)
 
   useEffect(() => {
-    const updateWalletPoints = async () => {
-      const setErrorMessage = () => {
-        dispatch(
-          setError({
-            errorMessage:
-              'Failed to update wallet points. Be assured that your points will be added later.',
-          }),
-        )
+    if (isWalletOwnershipVerificationRequired) {
+      setState(STATE.Loading)
+    }
+  }, [isWalletOwnershipVerificationRequired])
+
+  useEffect(() => {
+    if (isWalletOwnershipVerified) {
+      setWalletOwnership(true)
+    }
+  }, [isWalletOwnershipVerified])
+
+  useEffect(() => {
+    const checkWalletOwnership = async () => {
+      const ownership = await CampaignService.checkWalletOwnership(account!)
+      setWalletOwnership(ownership)
+      if (!ownership) {
+        setAuthError('WalletNotSignInException')
       }
+    }
+    checkWalletOwnership()
+  }, [account, setAuthError])
 
-      try {
-        setLoading(true)
-        const result = await CampaignService.updateWalletPoints(
-          chainId!,
-          account!,
-          transactionHash,
-        )
-        if (!result.pointsAccumulated) {
-          setErrorMessage()
+  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,
+          )
+          if (!result.pointsAccumulated) {
+            dispatch(
+              setError({
+                errorMessage: ERROR_MESSAGE,
+              }),
+            )
+          }
+          setPointsAccumulated(result.pointsAccumulated)
+          setState(STATE.Congrats)
+        } catch (error) {
+          dispatch(
+            setError({
+              errorMessage: ERROR_MESSAGE,
+            }),
+          )
         }
-        setPointsAccumulated(result.pointsAccumulated)
-      } catch (error) {
-        setErrorMessage()
-      } finally {
-        setLoading(false)
       }
     }
     updateWalletPoints()
-  }, [account, chainId, dispatch, transactionHash])
+  }, [account, chainId, dispatch, transactionHash, walletOwnership])
 
   const styles = {
     wrapper: css`
@@ -112,34 +175,40 @@ export function PointsEarned({
     `,
   }
 
-  if (loading) {
-    return <LoadingModal title='SUPPLY' />
+  if (state === STATE.SignIn) {
+    return (
+      <SignIn description='Please sign in to check the points that you earned.' />
+    )
   }
 
-  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>
+  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>
-      <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' />
 }

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

@@ -74,7 +74,6 @@ export function PersonaEvaluation({
   const KYCCopies = poolInfo.KYC!.Persona!
   const [loadingType, setLoadingType] = useState<LoadingType>()
   const [kycCopy, setKYCCopy] = useState<KYCCopy>(KYCCopies.verifyIdentity)
-  const isVerifyIdentity = kycCopy === KYCCopies.verifyIdentity
   const [inquiryId, setInquiryId] = useState<string>()
   const [sessionToken, setSessionToken] = useState<string>()
   const [verificationStatus, setVerificationStatus] =
@@ -395,7 +394,7 @@ export function PersonaEvaluation({
         <Box css={styles.iconWrapper}>
           <img src={ApproveLenderImg} alt='approve-lender' />
         </Box>
-        {campaign && isVerifyIdentity ? (
+        {campaign && kycCopy === KYCCopies.verifyIdentity ? (
           <Box css={styles.description}>
             <span>You’ll be rewarded with a minimum of</span>
             <span css={styles.points}>

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

@@ -53,7 +53,6 @@ export function LendSupplyV2({
   handleClose,
   handleSuccess,
 }: LendSupplyPropsV2): React.ReactElement | null {
-  console.log('campaign', campaign)
   const dispatch = useDispatch()
   const poolName = POOL_NAME[poolNameStr]
   const { chainId, provider, account } = useWeb3React()

package/src/components/SignIn.tsx

@@ -2,7 +2,11 @@ import { Box, css, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import { ApproveLenderImg } from './images'
 
-export function SignIn(): React.ReactElement {
+type Props = {
+  description?: string
+}
+
+export function SignIn({ description }: Props): React.ReactElement {
   const theme = useTheme()
   const styles = {
     wrapper: css`
@@ -41,7 +45,8 @@ export function SignIn(): React.ReactElement {
         <img src={ApproveLenderImg} alt='approve-lender' />
       </Box>
       <Box css={styles.content}>
-        Please sign in to verify your ownership of the wallet.
+        {description ??
+          'Please sign in to verify your ownership of the wallet.'}
       </Box>
     </Box>
   )