@huma-finance/widgets 0.0.48-beta.284 → 0.0.48-beta.285

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.284+8b72fa1",
+  "version": "0.0.48-beta.285+8f3c2ea",
   "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.48-beta.284+8b72fa1",
-    "@huma-finance/shared": "^0.0.48-beta.284+8b72fa1",
+    "@huma-finance/sdk": "^0.0.48-beta.285+8f3c2ea",
+    "@huma-finance/shared": "^0.0.48-beta.285+8f3c2ea",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -193,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "8b72fa16f78a30b13dd8e6a35f230cf5064e0278"
+  "gitHead": "8f3c2ea41fcde0549235950da76316b2262c0a83"
 }

package/src/components/Lend/supplyV2/1-ChooseTranche.tsx

@@ -1,10 +1,4 @@
-import {
-  openInNewTab,
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-  useLenderApprovedV2,
-} from '@huma-finance/shared'
+import { TrancheType, UnderlyingTokenInfo } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -14,7 +8,6 @@ import {
   RadioGroup,
   useTheme,
 } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
 import React from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
@@ -22,39 +15,20 @@ import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
-import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
-  poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
   changeTranche: (tranche: TrancheType) => void
 }
 
 export function ChooseTranche({
-  poolInfo,
   poolUnderlyingToken,
   selectedTranche,
   changeTranche,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
-  const { poolName } = poolInfo
   const dispatch = useAppDispatch()
-  const { account, provider } = useWeb3React()
-  const [lenderApprovedSenior] = useLenderApprovedV2(
-    poolName,
-    'senior',
-    account,
-    provider,
-  )
-  const [lenderApprovedJunior] = useLenderApprovedV2(
-    poolName,
-    'junior',
-    account,
-    provider,
-  )
-  const isLoading =
-    lenderApprovedSenior === undefined || lenderApprovedJunior === undefined
 
   const styles = {
     subTitle: css`
@@ -84,16 +58,7 @@ export function ChooseTranche({
   }
 
   const handleNext = () => {
-    if (
-      (selectedTranche === 'senior' && lenderApprovedSenior) ||
-      (selectedTranche === 'junior' && lenderApprovedJunior)
-    ) {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    } else if (poolInfo.KYC) {
-      dispatch(setStep(WIDGET_STEP.Evaluation))
-    } else if (poolInfo.supplyLink) {
-      openInNewTab(poolInfo.supplyLink)
-    }
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
   const items: {
@@ -110,10 +75,6 @@ export function ChooseTranche({
     },
   ]
 
-  if (isLoading) {
-    return <LoadingModal title={`Supply ${poolUnderlyingToken.symbol}`} />
-  }
-
   return (
     <WrapperModal title={`Supply ${poolUnderlyingToken.symbol}`}>
       <FormControl>

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

@@ -1,6 +1,8 @@
 import {
   POOL_NAME,
   TrancheType,
+  openInNewTab,
+  useLenderApprovedV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
 } from '@huma-finance/shared'
@@ -42,19 +44,66 @@ export function LendSupplyV2({
 }: LendSupplyPropsV2): React.ReactElement | null {
   const dispatch = useDispatch()
   const poolName = POOL_NAME[poolNameStr]
-  const { chainId, provider } = useWeb3React()
+  const { chainId, provider, account } = useWeb3React()
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
 
+  const [lenderApprovedSenior] = useLenderApprovedV2(
+    poolName,
+    'senior',
+    account,
+    provider,
+  )
+  const [lenderApprovedJunior] = useLenderApprovedV2(
+    poolName,
+    'junior',
+    account,
+    provider,
+  )
+
+  const lenderApproveStatusFetched =
+    lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
+
   useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    if (!step && poolInfo && lenderApproveStatusFetched) {
+      if (lenderApprovedJunior && !lenderApprovedSenior) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (lenderApprovedSenior && !lenderApprovedJunior) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (lenderApprovedJunior && lenderApprovedSenior) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+        return
+      }
+
+      if (poolInfo.KYC) {
+        dispatch(setStep(WIDGET_STEP.Evaluation))
+        return
+      }
+
+      if (poolInfo.supplyLink) {
+        openInNewTab(poolInfo.supplyLink)
+      }
     }
-  }, [dispatch, step])
+  }, [
+    dispatch,
+    lenderApproveStatusFetched,
+    lenderApprovedJunior,
+    lenderApprovedSenior,
+    poolInfo,
+    step,
+  ])
 
-  if (!poolInfo || !poolUnderlyingToken) {
+  if (!poolInfo || !poolUnderlyingToken || !lenderApproveStatusFetched) {
     return (
       <WidgetWrapper
         isOpen
@@ -75,7 +124,6 @@ export function LendSupplyV2({
     >
       {step === WIDGET_STEP.ChooseTranche && (
         <ChooseTranche
-          poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           selectedTranche={selectedTranche}
           changeTranche={setSelectedTranche}