@huma-finance/widgets 0.0.62-beta.693 → 0.0.62-beta.699

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.693+8191572",
+  "version": "0.0.62-beta.699+0d992b9",
   "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.693+8191572",
-    "@huma-finance/shared": "^0.0.62-beta.693+8191572",
-    "@huma-finance/web-shared": "^0.0.62-beta.693+8191572",
+    "@huma-finance/sdk": "^0.0.62-beta.699+0d992b9",
+    "@huma-finance/shared": "^0.0.62-beta.699+0d992b9",
+    "@huma-finance/web-shared": "^0.0.61",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -203,5 +203,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "8191572db7e2ff3ac3cfcebc41075fd60d8a23df"
+  "gitHead": "0d992b9eaf4c234189e50cbc26b6edc52f23f93e"
 }

package/src/components/Lend/solanaSupply/4-Transfer.tsx

@@ -1,4 +1,6 @@
 import {
+  CampaignService,
+  checkIsDev,
   getTokenAccounts,
   SolanaPoolInfo,
   SolanaTokenUtils,
@@ -6,12 +8,16 @@ import {
 } from '@huma-finance/shared'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import { useHumaProgram, useLenderAccounts } from '@huma-finance/web-shared'
+import {
+  SolanaPoolState,
+  useHumaProgram,
+  useLenderAccounts,
+} from '@huma-finance/web-shared'
 import { TOKEN_2022_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { Transaction } from '@solana/web3.js'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
+import { setPointsAccumulated, setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { LoadingModal } from '../../LoadingModal'
@@ -19,13 +25,18 @@ import { SolanaTxSendModal } from '../../SolanaTxSendModal'
 
 type Props = {
   poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
   selectedTranche: TrancheType
+  pointsTestnetExperience: boolean
 }
 
 export function Transfer({
   poolInfo,
+  poolState,
   selectedTranche,
+  pointsTestnetExperience,
 }: Props): React.ReactElement | null {
+  const isDev = checkIsDev()
   const dispatch = useAppDispatch()
   const { publicKey } = useWallet()
   const { supplyAmount } = useAppSelector(selectWidgetState)
@@ -44,9 +55,33 @@ export function Transfer({
   } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
   const program = useHumaProgram(poolInfo.chainId)
 
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
+  const handleSuccess = useCallback(
+    async (options?: { signature: string }) => {
+      if (publicKey && poolState.campaign && options?.signature) {
+        try {
+          const result = await CampaignService.updateWalletPoints(
+            publicKey.toString(),
+            options.signature,
+            poolInfo.chainId,
+            isDev,
+            pointsTestnetExperience,
+          )
+          dispatch(setPointsAccumulated(result.pointsAccumulated))
+        } catch (error) {
+          console.error('Failed to update wallet points', error)
+        }
+      }
+      dispatch(setStep(WIDGET_STEP.Done))
+    },
+    [
+      dispatch,
+      isDev,
+      pointsTestnetExperience,
+      poolInfo.chainId,
+      poolState.campaign,
+      publicKey,
+    ],
+  )
 
   useEffect(() => {
     async function getTx() {

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

@@ -1,7 +1,7 @@
 import { formatMoney, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
 import { SolanaPoolState } from '@huma-finance/web-shared'
 import dayjs from 'dayjs'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 import { Campaign } from '.'
 import { useAppSelector } from '../../../hooks/useRedux'
@@ -14,7 +14,6 @@ type Props = {
   poolInfo: SolanaPoolInfo
   poolState: SolanaPoolState
   campaign?: Campaign
-  updateTransactionHash: (hash: string) => void
   handleAction: () => void
 }
 
@@ -22,19 +21,12 @@ 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}.`,
   ]

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

@@ -12,13 +12,13 @@ import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
+import { PointsEarned } from '../../PointsEarned'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
 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
@@ -59,7 +59,6 @@ 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) {
@@ -141,24 +140,23 @@ export function SolanaLendSupply({
         />
       )}
       {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+        <Transfer
+          poolInfo={poolInfo}
+          poolState={poolState}
+          selectedTranche={selectedTranche}
+          pointsTestnetExperience={pointsTestnetExperience}
+        />
       )}
       {step === WIDGET_STEP.Done && (
         <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}
-        />
+      {step === WIDGET_STEP.PointsEarned && (
+        <PointsEarned lpConfig={poolState} handleAction={handleClose} />
       )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal

package/src/components/Lend/supplyV2/5-Transfer.tsx

@@ -1,11 +1,17 @@
-import { PoolInfoV2, TrancheType } from '@huma-finance/shared'
+import {
+  CampaignService,
+  checkIsDev,
+  PoolInfoV2,
+  TrancheType,
+} from '@huma-finance/shared'
 import { useTrancheVaultContractV2 } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
 import { ethers } from 'ethers'
 import React, { useCallback } from 'react'
 
+import { Campaign } from '.'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
+import { setPointsAccumulated, setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { TxSendModalV2 } from '../../TxSendModalV2'
@@ -13,14 +19,19 @@ import { TxSendModalV2 } from '../../TxSendModalV2'
 type Props = {
   poolInfo: PoolInfoV2
   trancheType: TrancheType
+  pointsTestnetExperience: boolean
+  campaign?: Campaign
 }
 
 export function Transfer({
   poolInfo,
   trancheType,
+  pointsTestnetExperience,
+  campaign,
 }: Props): React.ReactElement | null {
+  const isDev = checkIsDev()
   const dispatch = useAppDispatch()
-  const { account, provider } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const { supplyAmount } = useAppSelector(selectWidgetState)
   const { decimals } = poolInfo.poolUnderlyingToken
   const supplyBigNumber = ethers.utils.parseUnits(
@@ -34,9 +45,26 @@ export function Transfer({
     account,
   )
 
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
+  const handleSuccess = useCallback(
+    async (options?: { txHash: string }) => {
+      if (campaign && options?.txHash) {
+        try {
+          const result = await CampaignService.updateWalletPoints(
+            account!,
+            options.txHash,
+            chainId!,
+            isDev,
+            pointsTestnetExperience,
+          )
+          dispatch(setPointsAccumulated(result.pointsAccumulated))
+        } catch (error) {
+          console.error('Failed to update wallet points', error)
+        }
+      }
+      dispatch(setStep(WIDGET_STEP.Done))
+    },
+    [account, campaign, chainId, dispatch, isDev, pointsTestnetExperience],
+  )
 
   if (!trancheVaultContract || !account) {
     return null

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

@@ -26,7 +26,6 @@ type Props = {
   poolInfo: PoolInfoV2
   lpConfig: { withdrawalLockoutPeriodInDays: number }
   campaign?: Campaign
-  updateTransactionHash: (hash: string) => void
   handleAction: () => void
 }
 
@@ -34,12 +33,11 @@ export function Success({
   poolInfo,
   lpConfig,
   campaign,
-  updateTransactionHash,
   handleAction,
 }: Props): React.ReactElement {
   const dispatch = useDispatch()
   const { account, chainId } = useWeb3React()
-  const [{ txReceipt, txHash }] = useAtom(sendTxAtom)
+  const [{ txReceipt }] = useAtom(sendTxAtom)
   const { symbol, decimals, address } = poolInfo.poolUnderlyingToken
   const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
@@ -63,12 +61,6 @@ export function Success({
     }
   }, [account, address, decimals, poolInfo.poolSafe, txReceipt])
 
-  useEffect(() => {
-    if (txHash) {
-      updateTransactionHash(txHash)
-    }
-  }, [txHash, updateTransactionHash])
-
   const handleUserAction = useCallback(() => {
     if (isFirstTimeNotifiUser && notifiChainSupported) {
       dispatch(setStep(WIDGET_STEP.Notifications))

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

@@ -19,6 +19,7 @@ import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
+import { PointsEarned } from '../../PointsEarned'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { ChooseTranche } from './1-ChooseTranche'
 import { Evaluation } from './2-Evaluation'
@@ -27,7 +28,6 @@ import { ApproveAllowance } from './4-ApproveAllowance'
 import { Transfer } from './5-Transfer'
 import { Success } from './6-Success'
 import { Notifications } from './7-Notifications'
-import { PointsEarned } from './8-PointsEarned'
 
 export interface Campaign {
   id: string
@@ -65,7 +65,6 @@ export function LendSupplyV2({
   const { poolUnderlyingToken } = poolInfo || {}
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
-  const [transactionHash, setTransactionHash] = useState<string | undefined>()
   const lpConfig = useLPConfigV2(poolName, provider)
   const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
   const [lenderApprovedSenior] = useLenderApprovedV2(
@@ -199,25 +198,29 @@ export function LendSupplyV2({
         <ApproveAllowance poolInfo={poolInfo} />
       )}
       {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer poolInfo={poolInfo} trancheType={selectedTranche} />
+        <Transfer
+          poolInfo={poolInfo}
+          trancheType={selectedTranche}
+          pointsTestnetExperience={pointsTestnetExperience}
+          campaign={campaign}
+        />
       )}
       {step === WIDGET_STEP.Done && (
         <Success
           poolInfo={poolInfo}
           lpConfig={lpConfig}
           campaign={campaign}
-          updateTransactionHash={setTransactionHash}
           handleAction={handleClose}
         />
       )}
       {step === WIDGET_STEP.Notifications && (
         <Notifications campaign={campaign} handleAction={handleClose} />
       )}
-      {step === WIDGET_STEP.PointsEarned && transactionHash && (
+      {step === WIDGET_STEP.PointsEarned && (
         <PointsEarned
-          transactionHash={transactionHash}
-          lpConfig={lpConfig}
-          pointsTestnetExperience={pointsTestnetExperience}
+          lpConfig={{
+            withdrawalLockupPeriodDays: lpConfig.withdrawalLockoutPeriodInDays,
+          }}
           handleAction={handleClose}
         />
       )}

package/src/components/Notifi/NotifiContextWrapper.tsx

@@ -39,6 +39,10 @@ export function NotifiContextWrapper({
     cardId = process.env.REACT_APP_NOTIFI_CONFIG_ID_SCROLL ?? ''
   }
 
+  if (!cardId) {
+    return children
+  }
+
   return (
     <NotifiContextProvider
       tenantId='humafinanceprod'

package/src/components/PointsEarned.tsx

@@ -0,0 +1,124 @@
+import { formatNumber, isEmpty } from '@huma-finance/shared'
+import { txAtom } from '@huma-finance/web-shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { selectWidgetState } from '../store/widgets.selectors'
+import { BottomButton } from './BottomButton'
+import { CongratulationsIcon, HumaPointsIcon, RibbonIcon } from './icons'
+
+type Props = {
+  lpConfig: { withdrawalLockupPeriodDays?: number }
+  handleAction: () => void
+}
+
+export function PointsEarned({
+  lpConfig,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useDispatch()
+  const reset = useResetAtom(txAtom)
+  const { pointsAccumulated } = useAppSelector(selectWidgetState)
+  const hasPointsAccumulated =
+    !isEmpty(pointsAccumulated) && pointsAccumulated! > 0
+  const lockupMonths = Math.round(lpConfig.withdrawalLockupPeriodDays ?? 0 / 30)
+  const monthText =
+    lockupMonths > 1 ? `${lockupMonths} months` : `${lockupMonths} month`
+
+  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;
+    `,
+  }
+
+  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>
+  )
+}

package/src/components/SolanaTxSendModal.tsx

@@ -3,15 +3,15 @@ import React, { useEffect, useState } from 'react'
 
 import { useConnection, useWallet } from '@solana/wallet-adapter-react'
 import { Transaction } from '@solana/web3.js'
+import { useAppDispatch } from '../hooks/useRedux'
 import { setError, setSolanaSignature } from '../store/widgets.reducers'
 import { LoadingModal } from './LoadingModal'
 import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
-import { useAppDispatch } from '../hooks/useRedux'
 
 type Props = {
   chainId: SolanaChainEnum
   tx?: Transaction
-  handleSuccess: () => void
+  handleSuccess: (options?: { signature: string }) => void
 }
 
 export function SolanaTxSendModal({
@@ -41,7 +41,7 @@ export function SolanaTxSendModal({
           lastValidBlockHeight: latestBlockHash.lastValidBlockHeight,
           signature,
         })
-        handleSuccess()
+        handleSuccess({ signature })
       } catch (error: unknown) {
         const err = error as Error
         dispatch(setError({ errorMessage: err?.message || '' }))

package/src/components/TxSendModalV2.tsx

@@ -14,7 +14,7 @@ type Props = {
   params: unknown[]
   title?: string
   contract: Contract
-  handleSuccess?: () => void
+  handleSuccess?: (options?: { txHash: string }) => void
 }
 
 export function TxSendModalV2({
@@ -30,12 +30,12 @@ export function TxSendModalV2({
   const [{ state, txHash }, send] = useAtom(sendTxAtom)
 
   useEffect(() => {
-    if (state === TxStateType.Success) {
+    if (state === TxStateType.Success && txHash) {
       if (handleSuccess) {
-        handleSuccess()
+        handleSuccess({ txHash })
       }
     }
-  }, [dispatch, handleSuccess, state])
+  }, [dispatch, handleSuccess, state, txHash])
 
   useMount(() => {
     send({ contract, method, params, provider })

package/src/store/widgets.reducers.ts

@@ -1,5 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Approval } from '@huma-finance/shared'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import {
   initialWidgetState,
@@ -106,6 +106,12 @@ export const widgetSlice = createSlice({
     setSolanaSignature: (state, { payload }: PayloadAction<string>) => {
       state.solanaSignature = payload
     },
+    setPointsAccumulated: (
+      state,
+      { payload }: PayloadAction<number | undefined>,
+    ) => {
+      state.pointsAccumulated = payload
+    },
     setError: (
       state,
       {
@@ -135,6 +141,7 @@ export const {
   setRedeemAmount,
   setRedeemShares,
   setSolanaSignature,
+  setPointsAccumulated,
 } = widgetSlice.actions
 
 export default widgetSlice.reducer

package/src/store/widgets.store.ts

@@ -59,6 +59,7 @@ export type WidgetState = {
   stream?: WidgetStream
   multisend?: MultisendPayload
   solanaSignature?: string
+  pointsAccumulated?: number
 }
 
 export const initialWidgetState: WidgetState = {}