@huma-finance/widgets 0.0.62-beta.635 → 0.0.62-beta.636

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.635+3697d5c",
+  "version": "0.0.62-beta.636+9afaa1d",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.635+3697d5c",
-    "@huma-finance/shared": "^0.0.62-beta.635+3697d5c",
-    "@huma-finance/web-shared": "^0.0.62-beta.635+3697d5c",
+    "@huma-finance/sdk": "^0.0.62-beta.636+9afaa1d",
+    "@huma-finance/shared": "^0.0.62-beta.636+9afaa1d",
+    "@huma-finance/web-shared": "^0.0.62-beta.636+9afaa1d",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -207,5 +207,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "3697d5c54ff93df02370acd34d8ca1686e90919f"
+  "gitHead": "9afaa1d673baaa4ce656cbc6fba229e446d3d927"
 }

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

@@ -1,26 +1,40 @@
 import { formatMoney, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
 import { SolanaPoolState } from '@huma-finance/web-shared'
-import React from 'react'
-
 import dayjs from 'dayjs'
-import { selectWidgetState } from '../../../store/widgets.selectors'
+import React, { useCallback, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { Campaign } from '.'
 import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
 import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
 
 type Props = {
   poolInfo: SolanaPoolInfo
   poolState: SolanaPoolState
+  campaign?: Campaign
+  updateTransactionHash: (hash: string) => void
   handleAction: () => void
 }
 
 export function Success({
   poolInfo,
   poolState,
+  campaign,
+  updateTransactionHash,
   handleAction,
 }: Props): React.ReactElement {
+  const dispatch = useDispatch()
   const { supplyAmount, solanaSignature } = useAppSelector(selectWidgetState)
   const { symbol } = poolInfo.underlyingMint
 
+  useEffect(() => {
+    if (solanaSignature) {
+      updateTransactionHash(solanaSignature)
+    }
+  }, [solanaSignature, updateTransactionHash])
+
   const content = [
     `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
   ]
@@ -39,14 +53,22 @@ export function Success({
     ]
   }
 
+  const handleUserAction = useCallback(() => {
+    if (campaign) {
+      dispatch(setStep(WIDGET_STEP.PointsEarned))
+    } else {
+      handleAction()
+    }
+  }, [campaign, dispatch, handleAction])
+
   return (
     <SolanaTxDoneModal
-      handleAction={handleAction}
+      handleAction={handleUserAction}
       content={content}
       subContent={getSubContent()}
       chainId={poolInfo.chainId}
       solanaSignature={solanaSignature}
-      buttonText='DONE'
+      buttonText={campaign ? 'VIEW POINTS' : 'DONE'}
     />
   )
 }

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

@@ -0,0 +1,250 @@
+import {
+  CampaignService,
+  CHAIN_TYPE,
+  checkIsDev,
+  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: () => 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()
+  }, [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. Plus, If you keep your investment till after{' '}
+          {monthText}, you’ll gain extra points daily.
+        </Box>
+        <BottomButton variant='contained' onClick={handleCloseModal}>
+          GREAT
+        </BottomButton>
+      </Box>
+    )
+  }
+
+  return <LoadingModal title='SUPPLY' />
+}

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

@@ -18,6 +18,12 @@ import { ChooseTranche } from './2-ChooseTranche'
 import { ChooseAmount } from './3-ChooseAmount'
 import { Transfer } from './4-Transfer'
 import { Success } from './5-Success'
+import { PointsEarned } from './6-PointsEarned'
+
+export interface Campaign {
+  id: string
+  campaignGroupId: string
+}
 
 /**
  * Lend pool supply props
@@ -53,6 +59,7 @@ export function SolanaLendSupply({
   const [tokenAccount, isLoadingTokenAccount] = useTokenAccount(poolInfo)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const [transactionHash, setTransactionHash] = useState<string | undefined>()
 
   useEffect(() => {
     if (!step && !isLoadingLenderAccounts && !isLoadingTokenAccount) {
@@ -112,6 +119,7 @@ export function SolanaLendSupply({
           poolInfo={poolInfo}
           isUniTranche={!!isUniTranche}
           pointsTestnetExperience={pointsTestnetExperience}
+          campaign={poolState.campaign}
           handleClose={handleClose}
           changeTranche={setSelectedTranche}
         />
@@ -139,6 +147,16 @@ export function SolanaLendSupply({
         <Success
           poolInfo={poolInfo}
           poolState={poolState}
+          campaign={poolState.campaign}
+          updateTransactionHash={setTransactionHash}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.PointsEarned && transactionHash && (
+        <PointsEarned
+          transactionHash={transactionHash}
+          poolState={poolState}
+          pointsTestnetExperience={pointsTestnetExperience}
           handleAction={handleClose}
         />
       )}

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

@@ -76,14 +76,16 @@ export function PointsEarned({
 
   useEffect(() => {
     const checkWalletOwnership = async () => {
-      const ownership = await CampaignService.checkWalletOwnership(
-        account!,
-        isDev,
-        pointsTestnetExperience,
-      )
-      setWalletOwnership(ownership)
-      if (!ownership) {
-        setAuthError('WalletNotSignInException')
+      if (account) {
+        const ownership = await CampaignService.checkWalletOwnership(
+          account,
+          isDev,
+          pointsTestnetExperience,
+        )
+        setWalletOwnership(ownership)
+        if (!ownership) {
+          setAuthError('WalletNotSignInException')
+        }
       }
     }
     checkWalletOwnership()