@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.279

package/src/components/Lend/redeemV2/4-Done.tsx

@@ -0,0 +1,33 @@
+import { formatMoney, UnderlyingTokenInfo } from '@huma-finance/shared'
+import React from 'react'
+
+import { REDEMPTION_TYPE, RedemptionActionInfo } from '.'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  redemptionType: REDEMPTION_TYPE
+  handleAction: () => void
+}
+
+export function Done({
+  poolUnderlyingToken,
+  redemptionType,
+  handleAction,
+}: Props): React.ReactElement {
+  const { symbol } = poolUnderlyingToken
+  const { redeemAmount, redeemShares } = useAppSelector(selectWidgetState)
+  const redemptionActionInfo = RedemptionActionInfo[redemptionType]
+  const isCreate = redemptionActionInfo.action === 'Create'
+
+  const content = [
+    `You successfully ${isCreate ? 'created' : 'canceled'} ${formatMoney(
+      redeemAmount,
+    )} ${symbol} (${redeemShares} shares) redemption request.`,
+    isCreate ? `Note: Exact redemption amounts may vary once processed.` : '',
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,207 @@
+import {
+  POOL_NAME,
+  useCancellableRedemptionInfoV2,
+  useLenderPositionV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+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 { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ChooseAction } from './1-ChooseAction'
+import { ChooseAmount } from './2-ChooseAmount'
+import { Transfer } from './3-Transfer'
+import { Done } from './4-Done'
+
+/**
+ * Lend pool withdraw props
+ * @typedef {Object} LendRedeemPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the lending pool withdraw action is successful.
+ */
+export type LendRedeemPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export enum REDEMPTION_TYPE {
+  AddSeniorRedemption = 1,
+  CancelSeniorRedemption = 2,
+  AddJuniorRedemption = 3,
+  CancelJuniorRedemption = 4,
+}
+
+export const RedemptionActionInfo: {
+  [key in REDEMPTION_TYPE]: {
+    action: 'Create' | 'Cancel'
+    tranche: 'senior' | 'junior'
+  }
+} = {
+  [REDEMPTION_TYPE.AddSeniorRedemption]: {
+    action: 'Create',
+    tranche: 'senior',
+  },
+  [REDEMPTION_TYPE.CancelSeniorRedemption]: {
+    action: 'Cancel',
+    tranche: 'senior',
+  },
+  [REDEMPTION_TYPE.AddJuniorRedemption]: {
+    action: 'Create',
+    tranche: 'junior',
+  },
+  [REDEMPTION_TYPE.CancelJuniorRedemption]: {
+    action: 'Cancel',
+    tranche: 'junior',
+  },
+}
+
+export type RedemptionInfo = {
+  shares: BigNumber
+  amount: BigNumber
+}
+
+export function LendRedeemV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: LendRedeemPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account, chainId, provider } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const { step, errorMessage, errorReason } = useAppSelector(selectWidgetState)
+  const [seniorRedemptionInfo, refreshSeniorRedemptionInfo] =
+    useCancellableRedemptionInfoV2(poolName, 'senior', account, provider)
+  const [juniorRedemptionInfo, refreshJuniorRedemptionInfo] =
+    useCancellableRedemptionInfoV2(poolName, 'junior', account, provider)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const [seniorPosition, refreshSeniorPosition] = useLenderPositionV2(
+    poolName,
+    'senior',
+    account,
+    provider,
+  )
+  const [juniorPosition, refreshJuniorPosition] = useLenderPositionV2(
+    poolName,
+    'junior',
+    account,
+    provider,
+  )
+  const [redemptionType, setRedemptionType] = useState<REDEMPTION_TYPE>()
+  const redemptionActionInfo = redemptionType
+    ? RedemptionActionInfo[redemptionType]
+    : undefined
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    }
+  }, [dispatch, step])
+
+  const handleRedeemSuccess = useCallback(
+    (blockNumber: number) => {
+      refreshSeniorRedemptionInfo()
+      refreshJuniorRedemptionInfo()
+      refreshSeniorPosition()
+      refreshJuniorPosition()
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [
+      handleSuccess,
+      refreshJuniorPosition,
+      refreshJuniorRedemptionInfo,
+      refreshSeniorPosition,
+      refreshSeniorRedemptionInfo,
+    ],
+  )
+
+  const getMaxAmount = () => {
+    if (redemptionActionInfo?.tranche === 'senior') {
+      return redemptionActionInfo?.action === 'Create'
+        ? seniorPosition
+        : seniorRedemptionInfo?.amount
+    }
+    if (redemptionActionInfo?.tranche === 'junior') {
+      return redemptionActionInfo?.action === 'Create'
+        ? juniorPosition
+        : juniorRedemptionInfo?.amount
+    }
+    return undefined
+  }
+
+  if (!poolInfo || !poolUnderlyingToken) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Redeem'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Redeem'
+      handleClose={handleClose}
+      handleSuccess={handleRedeemSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseAction
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          seniorRedemptionInfo={seniorRedemptionInfo}
+          juniorRedemptionInfo={juniorRedemptionInfo}
+          redemptionType={redemptionType}
+          changeRedemptionType={setRedemptionType}
+          seniorPosition={seniorPosition}
+          juniorPosition={juniorPosition}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && redemptionType && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          redemptionType={redemptionType}
+          maxAmount={getMaxAmount() ?? BigNumber.from(0)}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && redemptionType && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          redemptionType={redemptionType}
+        />
+      )}
+      {step === WIDGET_STEP.Done && redemptionType && (
+        <Done
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={handleClose}
+          redemptionType={redemptionType}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Redeem'
+          errorReason={errorReason}
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/supply/1-Evaluation/EvaluationKYC.tsx

@@ -87,8 +87,11 @@ export function EvaluationKYC({
   const isDev = checkIsDev()
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
-  const { isWalletOwnershipVerified, setError: setAuthError } =
-    useAuthErrorHandling(isDev)
+  const {
+    isWalletOwnershipVerified,
+    setError: setAuthError,
+    error: authError,
+  } = useAuthErrorHandling(isDev)
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()
@@ -250,6 +253,20 @@ export function EvaluationKYC({
     isWalletOwnershipVerified,
   ])
 
+  useEffect(() => {
+    if (
+      authError &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      [4001, 'ACTION_REJECTED'].includes((authError as any).code)
+    ) {
+      dispatch(
+        setError({
+          errorMessage: 'User has rejected the transaction.',
+        }),
+      )
+    }
+  }, [authError, dispatch])
+
   const approveLender = async () => {
     if (docSignatureCompleted) {
       handleClose()

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

@@ -52,33 +52,47 @@ export function LendSupply({
   handleSuccess,
 }: LendSupplyProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account, chainId } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { decimals } = poolInfo?.poolUnderlyingToken || {}
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const { allowance } = usePoolAllowance(poolName, poolType, account)
+  const { allowance } = usePoolAllowance(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
   const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
   const [lenderApproved, refreshLenderApproved] = useLenderApproved(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
   const [, refreshLenderPosition] = useLenderPosition(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
   const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
     poolName,
     poolType,
+    chainId,
+    provider,
   )
   const underlyingTokenBalance = usePoolUnderlyingTokenBalance(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
   const balanceWithoutDecimals = downScale(underlyingTokenBalance, decimals)
 

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

@@ -0,0 +1,155 @@
+import {
+  openInNewTab,
+  PoolInfoV2,
+  TrancheType,
+  UnderlyingTokenInfo,
+  useLenderApprovedV2,
+} from '@huma-finance/shared'
+import {
+  css,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+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`
+      color: ${theme.palette.text.primary} !important;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(5)};
+      margin-left: ${theme.spacing(2)};
+    `,
+    radioGroup: css`
+      margin-left: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    formControl: css`
+      margin-bottom: ${theme.spacing(1)};
+
+      .MuiFormControlLabel-label {
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Regular';
+        font-size: 16px;
+        line-height: 150%;
+        letter-spacing: 0.15px;
+      }
+    `,
+  }
+
+  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)
+    }
+  }
+
+  const items: {
+    label: string
+    value: TrancheType
+  }[] = [
+    {
+      label: 'Senior',
+      value: 'senior',
+    },
+    {
+      label: 'Junior',
+      value: 'junior',
+    },
+  ]
+
+  if (isLoading) {
+    return <LoadingModal title={`Supply ${poolUnderlyingToken.symbol}`} />
+  }
+
+  return (
+    <WrapperModal title={`Supply ${poolUnderlyingToken.symbol}`}>
+      <FormControl>
+        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
+        <RadioGroup
+          aria-labelledby='buttons-group-label'
+          name='radio-buttons-group'
+          css={styles.radioGroup}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+        >
+          {items.map((item) => (
+            <FormControlLabel
+              key={item.label}
+              value={item.value}
+              control={
+                <Radio
+                  sx={{
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 24,
+                    },
+                  }}
+                />
+              }
+              label={item.label}
+              css={styles.formControl}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      <BottomButton
+        variant='contained'
+        disabled={!selectedTranche}
+        onClick={handleNext}
+      >
+        NEXT
+      </BottomButton>
+    </WrapperModal>
+  )
+}