@huma-finance/widgets 0.0.62-beta.620 → 0.0.62-beta.621

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.620+c0e0d29",
+  "version": "0.0.62-beta.621+60c42c2",
   "publishConfig": {
     "access": "public"
   },
@@ -28,9 +28,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.61",
-    "@huma-finance/shared": "^0.0.61",
-    "@huma-finance/web-shared": "^0.0.62-beta.620+c0e0d29",
+    "@huma-finance/sdk": "^0.0.62-beta.621+60c42c2",
+    "@huma-finance/shared": "^0.0.62-beta.621+60c42c2",
+    "@huma-finance/web-shared": "^0.0.62-beta.621+60c42c2",
     "@notifi-network/notifi-frontend-client": "^0.91.1",
     "@reduxjs/toolkit": "^1.8.6",
     "@types/utf8": "^3.0.1",
@@ -200,5 +200,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "c0e0d29e4570dd75f346f1b8a61dcb7abf174df2"
+  "gitHead": "60c42c211d6cf4955f969c8aea9fbabd3ef09df4"
 }

package/src/components/Lend/solanaSupply/1-Evaluation.tsx

@@ -0,0 +1,106 @@
+import {
+  checkIsDev,
+  IdentityServiceV2,
+  SolanaPoolInfo,
+} from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWallet } from '@solana/wallet-adapter-react'
+import React, { useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CustomError } from '../../../utilTypes'
+import { BottomButton } from '../../BottomButton'
+import { ApproveLenderImg } from '../../images'
+import { LoadingModal } from '../../LoadingModal'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  isUniTranche?: boolean
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  isUniTranche,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useAppDispatch()
+  const { publicKey } = useWallet()
+  const [loading, setLoading] = useState(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(8)};
+      & > img {
+        width: 144px;
+      }
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(10)};
+      padding: ${theme.spacing(0, 2)};
+      font-weight: 400;
+      font-size: 16px;
+      color: ${theme.palette.text.secondary};
+    `,
+  }
+
+  const approveLender = async () => {
+    if (publicKey) {
+      try {
+        setLoading(true)
+        await IdentityServiceV2.approveSolanaLender(
+          publicKey.toString(),
+          poolInfo.chainId,
+          poolInfo.juniorTrancheMint,
+          isDev,
+        )
+        if (!isUniTranche) {
+          await IdentityServiceV2.approveSolanaLender(
+            publicKey.toString(),
+            poolInfo.chainId,
+            poolInfo.seniorTrancheMint,
+            isDev,
+          )
+        }
+        handleApproveSuccess()
+        setLoading(false)
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      } catch (e: unknown) {
+        const error = e as CustomError
+        setLoading(false)
+        dispatch(setError({ errorMessage: error.message }))
+      }
+    }
+  }
+
+  if (!loading) {
+    return (
+      <WrapperModal
+        title='Lender Approval'
+        subTitle='This pool requires lender approval'
+      >
+        <Box css={styles.iconWrapper}>
+          <img src={ApproveLenderImg} alt='approve-lender' />
+        </Box>
+        <Box css={styles.description} />
+        <BottomButton variant='contained' onClick={approveLender}>
+          GET APPROVED
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Approval Pending'
+      description='Waiting for approval confirmation...'
+    />
+  )
+}

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

@@ -16,7 +16,7 @@ import { InputAmountModal } from '../../InputAmountModal'
 type Props = {
   poolInfo: SolanaPoolInfo
   poolState: SolanaPoolState
-  tokenAccount: Account
+  tokenAccount?: Account
   selectedTranche: TrancheType | undefined
   isUniTranche?: boolean
 }
@@ -31,10 +31,9 @@ export function ChooseAmount({
   const dispatch = useAppDispatch()
   const { symbol, decimals } = poolInfo.underlyingMint
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
-  const balance = useMemo(
-    () => new BN(tokenAccount.amount.toString()),
-    [tokenAccount.amount],
-  )
+  const balance = tokenAccount
+    ? new BN(tokenAccount.amount.toString())
+    : new BN(0)
 
   const { juniorAvailableCapBN, seniorAvailableCapBN } = useMemo(() => {
     const {

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

@@ -4,17 +4,18 @@ import {
   useLenderAccounts,
   useTokenAccount,
 } from '@huma-finance/web-shared'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
 import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WidgetWrapper } from '../../WidgetWrapper'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseTranche } from './1-ChooseTranche'
-import { ChooseAmount } from './3-ChooseAmount'
-import { setStep } from '../../../store/widgets.reducers'
 import { ErrorModal } from '../../ErrorModal'
+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'
 
@@ -45,6 +46,7 @@ export function SolanaLendSupply({
     seniorLenderApproved,
     juniorLenderApproved,
     loading: isLoadingLenderAccounts,
+    refresh: refreshLenderAccounts,
   } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
   const [tokenAccount, isLoadingTokenAccount] = useTokenAccount(poolInfo)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
@@ -52,6 +54,11 @@ export function SolanaLendSupply({
 
   useEffect(() => {
     if (!step && !isLoadingLenderAccounts && !isLoadingTokenAccount) {
+      if (!juniorLenderApproved && !seniorLenderApproved) {
+        dispatch(setStep(WIDGET_STEP.Evaluation))
+        return
+      }
+
       if (juniorLenderApproved && !seniorLenderApproved) {
         setSelectedTranche('junior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
@@ -66,13 +73,7 @@ export function SolanaLendSupply({
 
       if (juniorLenderApproved && seniorLenderApproved) {
         dispatch(setStep(WIDGET_STEP.ChooseTranche))
-        // return
       }
-
-      //   if (poolInfo.supplyLink) {
-      //     openInNewTab(poolInfo.supplyLink)
-      //     handleClose()
-      //   }
     }
   }, [
     dispatch,
@@ -85,6 +86,10 @@ export function SolanaLendSupply({
     isLoadingTokenAccount,
   ])
 
+  const handleApproveSuccess = useCallback(() => {
+    refreshLenderAccounts()
+  }, [refreshLenderAccounts])
+
   if (isLoadingLenderAccounts || isLoadingTokenAccount) {
     return (
       <WidgetWrapper
@@ -104,6 +109,13 @@ export function SolanaLendSupply({
       handleClose={handleClose}
       handleSuccess={handleSuccess}
     >
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation
+          poolInfo={poolInfo}
+          isUniTranche={isUniTranche}
+          handleApproveSuccess={handleApproveSuccess}
+        />
+      )}
       {step === WIDGET_STEP.ChooseTranche && (
         <ChooseTranche
           poolUnderlyingToken={poolInfo.underlyingMint}
@@ -115,7 +127,7 @@ export function SolanaLendSupply({
         <ChooseAmount
           poolInfo={poolInfo}
           poolState={poolState}
-          tokenAccount={tokenAccount!}
+          tokenAccount={tokenAccount}
           selectedTranche={selectedTranche}
           isUniTranche={isUniTranche}
         />

package/src/components/SolanaTxDoneModal.tsx

@@ -61,9 +61,14 @@ export function SolanaTxDoneModal({
       width: 100%;
       position: absolute;
       bottom: 0;
-    `,
-    bottomButton: css`
-      margin-top: ${theme.spacing(1)};
+      display: flex;
+      row-gap: ${theme.spacing(1)};
+      column-gap: ${theme.spacing(1)};
+
+      button {
+        height: 40px;
+        margin-top: ${theme.spacing(1)};
+      }
     `,
   }
 
@@ -104,7 +109,6 @@ export function SolanaTxDoneModal({
           className='transaction-done-modal-close-btn'
           variant='contained'
           fullWidth
-          css={styles.bottomButton}
           onClick={handleCloseModal}
         >
           {!buttonText ? 'DONE' : buttonText}

package/src/components/SolanaViewOnExplorer.tsx

@@ -22,7 +22,7 @@ export function SolanaViewOnExplorer({
   }
 
   return (
-    <Button fullWidth variant='outlined' onClick={() => openInNewTab(link)}>
+    <Button fullWidth variant='contained' onClick={() => openInNewTab(link)}>
       <Box component='span'>VIEW ON EXPLORER</Box>
     </Button>
   )