@huma-finance/widgets 0.0.78-beta.1034 → 0.0.78-beta.1044

package/src/components/Lend/solanaWithdraw/components/CommitSwitcher.tsx

@@ -0,0 +1,198 @@
+import { css, SerializedStyles } from '@emotion/react'
+import {
+  PermissionlessDepositCommitment,
+  PermissionlessDepositCommitOptions,
+  toPercentage,
+} from '@huma-finance/shared'
+import { useMQ } from '@huma-finance/web-shared'
+import { alpha, Box, Typography, useTheme } from '@mui/material'
+import { ReactElement } from 'react'
+import {
+  MinusSignIcon,
+  MinusSignInactiveIcon,
+  PlusSignIcon,
+  PlusSignInactiveIcon,
+} from '../../../icons'
+
+interface Props {
+  selectedCommitment: PermissionlessDepositCommitment
+  commitments: PermissionlessDepositCommitment[]
+  totalApy: number | undefined
+  styles?: SerializedStyles
+  onCommitmentChange: (commitment: PermissionlessDepositCommitment) => void
+}
+
+export function CommitSwitcher({
+  selectedCommitment,
+  commitments,
+  totalApy,
+  styles: extraStyles,
+  onCommitmentChange,
+}: Props): ReactElement {
+  const theme = useTheme()
+  const { isXsSize } = useMQ()
+
+  const activeIndex = commitments.indexOf(selectedCommitment)
+  const isFirstItem = selectedCommitment === commitments[0]
+  const isLastItem = selectedCommitment === commitments[commitments.length - 1]
+
+  const getPreviousCommitment = () => {
+    if (isFirstItem) return null
+    return commitments[activeIndex - 1]
+  }
+
+  const getNextCommitment = () => {
+    if (isLastItem) return null
+    return commitments[activeIndex + 1]
+  }
+
+  const handlePrevious = () => {
+    const previousCommitment = getPreviousCommitment()
+    if (previousCommitment) {
+      onCommitmentChange(previousCommitment)
+    }
+  }
+
+  const handleNext = () => {
+    const nextCommitment = getNextCommitment()
+    if (nextCommitment) {
+      onCommitmentChange(nextCommitment)
+    }
+  }
+
+  const itemHeight = isXsSize ? 76 : 88
+
+  const styles = {
+    container: css`
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: ${theme.spacing(2)};
+    `,
+    button: css`
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      > svg {
+        width: ${isXsSize ? '48px' : '60px'};
+        height: auto;
+      }
+    `,
+    buttonDisabled: css`
+      cursor: not-allowed;
+    `,
+    carouselContainer: css`
+      position: relative;
+      flex: 1;
+      height: ${itemHeight}px;
+      overflow: hidden;
+      border-radius: ${theme.shape.borderRadius}px;
+    `,
+    carouselContent: css`
+      position: absolute;
+      top: ${activeIndex * -itemHeight}px;
+      transition: top 0.3s;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+    `,
+    item: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${theme.spacing(isXsSize ? 1 : 2, 2)};
+      background: ${alpha('#FFFFFF', 0.05)};
+      height: ${itemHeight}px;
+      width: 100%;
+    `,
+    info: css`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+    `,
+    minusSignIcon: css`
+      &:hover {
+        > path {
+          fill: url(#paint1_linear_11507_28492);
+        }
+      }
+    `,
+    plusSignIcon: css`
+      &:hover {
+        > path {
+          fill: url(#paint1_linear_11507_28493);
+        }
+      }
+    `,
+    apySkeleton: css`
+      width: 80px;
+      height: 32px;
+    `,
+    title: css`
+      color: #ececec;
+      font-weight: 700;
+    `,
+    apy: css`
+      color: #ececec;
+      font-weight: 700;
+    `,
+  }
+
+  const renderCommitmentOption = (
+    commitment: PermissionlessDepositCommitment,
+  ) => {
+    const option = PermissionlessDepositCommitOptions[commitment]
+
+    return (
+      <Box key={commitment} css={styles.item}>
+        <Box css={styles.info}>
+          <Typography variant={isXsSize ? 'body2' : 'h6'} css={styles.title}>
+            {option.title}
+          </Typography>
+        </Box>
+        <Typography variant={isXsSize ? 'body2' : 'h6'} css={styles.apy}>
+          {toPercentage(totalApy!, 1)}
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box css={[styles.container, extraStyles]}>
+      <Box
+        css={[styles.button, isFirstItem && styles.buttonDisabled]}
+        onClick={handlePrevious}
+      >
+        {isFirstItem ? (
+          <MinusSignInactiveIcon />
+        ) : (
+          <MinusSignIcon css={styles.minusSignIcon} />
+        )}
+      </Box>
+
+      <Box css={styles.carouselContainer}>
+        <Box css={styles.carouselContent}>
+          {commitments.map(renderCommitmentOption)}
+        </Box>
+      </Box>
+
+      <Box
+        css={[styles.button, isLastItem && styles.buttonDisabled]}
+        onClick={handleNext}
+      >
+        {isLastItem ? (
+          <PlusSignInactiveIcon />
+        ) : (
+          <PlusSignIcon css={styles.plusSignIcon} />
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/components/Lend/solanaWithdraw/components/ModeSelector.tsx

@@ -0,0 +1,148 @@
+import { PermissionlessDepositMode, toPercentage } from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { ModeClassicIcon, ModeMaxiIcon } from '../../../icons'
+
+type Props = {
+  classicModeTargetApy: number | undefined
+  maxiModeTargetApy: number | undefined
+  classicHumaRewardsApy: number | undefined
+  maxiHumaRewardsApy: number | undefined
+  selectedDepositMode: PermissionlessDepositMode
+  setSelectedDepositMode: (mode: PermissionlessDepositMode) => void
+}
+
+export function ModeSelector({
+  classicModeTargetApy,
+  maxiModeTargetApy,
+  classicHumaRewardsApy,
+  maxiHumaRewardsApy,
+  selectedDepositMode,
+  setSelectedDepositMode,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    modes: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: ${theme.spacing(1)};
+      gap: ${theme.spacing(1)};
+    `,
+    modeContainer: css`
+      padding: ${theme.spacing(0.125)};
+      width: 100%;
+    `,
+    modeContainerSelected: css`
+      border-radius: 8px;
+      background: linear-gradient(190deg, #d157ff 4.58%, #74deff 100%);
+      box-shadow: 2px 2px 24px 1px #272727;
+    `,
+    mode: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.spacing(1)};
+      padding: ${theme.spacing(2, 3)};
+      cursor: pointer;
+      background: #1b1b1b;
+      border-radius: 8px;
+    `,
+    modeSelected: css`
+      color: #ececec;
+    `,
+    modeTitle: css`
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: ${theme.spacing(1)};
+      font-size: 16px;
+      font-weight: 500;
+    `,
+    modeTitleClassic: css`
+      color: #74deff;
+    `,
+    modeTitleMaxi: css`
+      color: #c677ff;
+    `,
+    modeApy: css`
+      font-size: 16px;
+      font-weight: 500;
+      color: #848484;
+      margin-top: ${theme.spacing(1)};
+    `,
+    modeHumaRewardsApy: css`
+      font-size: 16px;
+      font-weight: 500;
+      color: #848484;
+      margin-top: ${theme.spacing(-1)};
+    `,
+  }
+
+  const getMode = (mode: PermissionlessDepositMode) => {
+    const modeInfos = {
+      [PermissionlessDepositMode.CLASSIC]: {
+        icon: <ModeClassicIcon />,
+        title: 'Classic',
+        apy: classicModeTargetApy,
+        humaRewardsApy: classicHumaRewardsApy,
+      },
+      [PermissionlessDepositMode.MAXI]: {
+        icon: <ModeMaxiIcon />,
+        title: 'Maxi',
+        apy: maxiModeTargetApy,
+        humaRewardsApy: maxiHumaRewardsApy,
+      },
+    }
+
+    const modeInfo = modeInfos[mode]
+
+    return (
+      <Box
+        css={[
+          styles.modeContainer,
+          selectedDepositMode === mode && styles.modeContainerSelected,
+        ]}
+        onClick={() => setSelectedDepositMode(mode)}
+      >
+        <Box css={styles.mode}>
+          <Box css={styles.modeTitle}>
+            {modeInfo.icon}
+            <Box
+              css={
+                mode === PermissionlessDepositMode.CLASSIC
+                  ? styles.modeTitleClassic
+                  : styles.modeTitleMaxi
+              }
+            >
+              {modeInfo.title}
+            </Box>
+          </Box>
+          <Box
+            css={[
+              styles.modeApy,
+              selectedDepositMode === mode && styles.modeSelected,
+            ]}
+          >
+            {toPercentage(modeInfo.apy, 1)} USDC APY
+          </Box>
+          <Box
+            css={[
+              styles.modeHumaRewardsApy,
+              selectedDepositMode === mode && styles.modeSelected,
+            ]}
+          >
+            {toPercentage(modeInfo.humaRewardsApy, 1)} Est. $HUMA
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box css={styles.modes}>
+      {getMode(PermissionlessDepositMode.CLASSIC)}
+      {getMode(PermissionlessDepositMode.MAXI)}
+    </Box>
+  )
+}

package/src/components/Lend/solanaWithdraw/components/SelectModeTitle.tsx

@@ -0,0 +1,61 @@
+import InfoOutlineIcon from '@mui/icons-material/InfoOutlined'
+import { Box, css, Tooltip, useTheme } from '@mui/material'
+import React from 'react'
+
+export function SelectModeTitle(): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    selectDepositMode: css`
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: ${theme.spacing(2)};
+      gap: ${theme.spacing(0.5)};
+    `,
+    selectDepositModeTitle: css`
+      font-weight: 700;
+      font-size: 16px;
+      color: #b8b8b8;
+    `,
+    infoIcon: css`
+      width: 16px;
+      height: 16px;
+      color: #686868;
+    `,
+  }
+
+  return (
+    <Box css={styles.selectDepositMode}>
+      <Box css={styles.selectDepositModeTitle}>Select deposit mode</Box>
+      <Tooltip
+        title={
+          <Box>
+            <Box>
+              Huma Permissionless offers two modes to match different LP
+              strategies. You can switch between them anytime, as often as you
+              like.
+            </Box>
+            <ul>
+              <li>
+                <strong>Classic Mode:</strong> Provides stable yield with
+                moderate Huma rewards. The current APY is 10%, updated monthly
+                based on market conditions. This mode is ideal for LPs who
+                prioritize consistent income.
+              </li>
+              <li>
+                <strong>Maxi Mode:</strong> Offers maximum Huma rewards by
+                trading away stable yield. LPs in this mode earn only Huma
+                rewards, making it the go-to choice for Huma-maximizing
+                believers—aka the Huma maxis.
+              </li>
+            </ul>
+          </Box>
+        }
+        placement='top'
+      >
+        <InfoOutlineIcon css={styles.infoIcon} />
+      </Tooltip>
+    </Box>
+  )
+}

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

@@ -1,5 +1,7 @@
 import {
   formatNumberFixed,
+  PermissionlessDepositCommitment,
+  PermissionlessDepositMode,
   SolanaPoolInfo,
   SolanaTokenUtils,
   TrancheType,
@@ -24,9 +26,43 @@ import {
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
-import { ConfirmTransfer } from './1-ConfirmTransfer'
-import { Transfer } from './2-Transfer'
-import { Done } from './3-Done'
+import { Option } from './1-Option'
+import { WithdrawAndDepositConfirm } from './2-WithdrawAndDepositConfirm'
+import { WithdrawOnlyConfirm } from './3-WithdrawOnlyConfirm'
+import { TransferAndDeposit } from './4-TransferAndDeposit'
+import { Transfer } from './5-Transfer'
+import { Done } from './6-Done'
+
+export enum WithdrawOption {
+  WITHDRAW_AND_REDEPOSIT = 'withdraw-and-redeposit',
+  WITHDRAW_ONLY = 'withdraw-only',
+}
+
+export type ClaimAndStakeOption = {
+  label: string
+  description?: string[]
+  id: string
+}
+
+export const ClaimAndStakeOptions: ClaimAndStakeOption[] = [
+  {
+    label: 'Withdraw and redeposit to Permissionless',
+    description: [
+      'Keep your OG status and unlock boosted yield forever',
+      'Choose your own investment lockup periods',
+      'Earn incentives for longer commitments',
+      'Earn Vanguard status',
+    ],
+    id: WithdrawOption.WITHDRAW_AND_REDEPOSIT,
+  },
+  {
+    label: `Withdraw only`,
+    id: WithdrawOption.WITHDRAW_ONLY,
+    description: [
+      'You need to have at least $100 USDC in Permissionless to keep your OG status',
+    ],
+  },
+]
 
 /**
  * Solana lend pool withdraw props
@@ -73,6 +109,13 @@ export function SolanaLendWithdraw({
   )
   const [withdrawnAmount, setWithdrawnAmount] = useState<BN>()
   const loggingHelper = useAppSelector(selectWidgetLoggingContext)
+  const [selectedOption, setSelectedOption] = useState(ClaimAndStakeOptions[0])
+  const [selectedDepositMode, setSelectedDepositMode] = useState(
+    PermissionlessDepositMode.CLASSIC,
+  )
+  const [selectedDepositCommitment, setSelectedDepositCommitment] = useState(
+    PermissionlessDepositCommitment.INITIAL_COMMITMENT_SIX_MONTHS,
+  )
 
   const handleCloseFlow = () => {
     loggingHelper.logAction('ExitFlow', {})
@@ -102,7 +145,7 @@ export function SolanaLendWithdraw({
       loggingHelperInit.logAction('StartFlow', {})
       dispatch(setLoggingContext(context))
 
-      dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
+      dispatch(setStep(WIDGET_STEP.Option))
     }
   }, [dispatch, poolInfo.chainId, poolInfo.poolName, poolInfo.poolType, step])
 
@@ -128,6 +171,18 @@ export function SolanaLendWithdraw({
     trancheType,
   ])
 
+  const handleConfirmOption = useCallback(() => {
+    if (selectedOption.id === WithdrawOption.WITHDRAW_AND_REDEPOSIT) {
+      dispatch(setStep(WIDGET_STEP.ConfirmWithdrawAndDeposit))
+    } else {
+      dispatch(setStep(WIDGET_STEP.ConfirmWithdrawOnly))
+    }
+  }, [dispatch, selectedOption.id])
+
+  const withdrawAndDeposit = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
       if (handleSuccess) {
@@ -140,28 +195,63 @@ export function SolanaLendWithdraw({
   return (
     <WidgetWrapper
       isOpen
+      width={step === WIDGET_STEP.ConfirmWithdrawAndDeposit ? '520px' : '480px'}
       loadingTitle={title}
       handleClose={handleCloseFlow}
       handleSuccess={handleWithdrawSuccess}
     >
-      {step === WIDGET_STEP.ConfirmTransfer && (
-        <ConfirmTransfer
+      {step === WIDGET_STEP.Option && (
+        <Option
           poolUnderlyingToken={poolInfo.underlyingMint}
           withdrawableAmountFormatted={withdrawableAmountFormatted ?? '--'}
-          sharePrice={sharePrice}
+          selectedOption={selectedOption}
+          setSelectedOption={setSelectedOption}
+          handleConfirmOption={handleConfirmOption}
+        />
+      )}
+      {step === WIDGET_STEP.ConfirmWithdrawAndDeposit && (
+        <WithdrawAndDepositConfirm
+          withdrawableAmount={withdrawableAmount}
+          withdrawableAmountFormatted={withdrawableAmountFormatted ?? '--'}
+          chainId={poolInfo.chainId}
+          selectedDepositMode={selectedDepositMode}
+          setSelectedDepositMode={setSelectedDepositMode}
+          selectedDepositCommitment={selectedDepositCommitment}
+          setSelectedDepositCommitment={setSelectedDepositCommitment}
+          withdrawAndDeposit={withdrawAndDeposit}
         />
       )}
-      {step === WIDGET_STEP.Transfer && (
-        <Transfer
-          poolInfo={poolInfo}
-          selectedTranche={trancheType}
-          poolIsClosed={poolIsClosed}
+      {step === WIDGET_STEP.ConfirmWithdrawOnly && (
+        <WithdrawOnlyConfirm
+          poolUnderlyingToken={poolInfo.underlyingMint}
+          withdrawableAmountFormatted={withdrawableAmountFormatted ?? '--'}
+          sharePrice={sharePrice}
         />
       )}
+      {step === WIDGET_STEP.Transfer &&
+        selectedOption.id === WithdrawOption.WITHDRAW_AND_REDEPOSIT && (
+          <TransferAndDeposit
+            poolInfo={poolInfo}
+            selectedTranche={trancheType}
+            poolIsClosed={poolIsClosed}
+            permissionlessMode={selectedDepositMode}
+            withdrawableAmount={withdrawableAmount}
+            depositCommitment={selectedDepositCommitment}
+          />
+        )}
+      {step === WIDGET_STEP.Transfer &&
+        selectedOption.id === WithdrawOption.WITHDRAW_ONLY && (
+          <Transfer
+            poolInfo={poolInfo}
+            selectedTranche={trancheType}
+            poolIsClosed={poolIsClosed}
+          />
+        )}
       {step === WIDGET_STEP.Done && withdrawnAmount && (
         <Done
           poolUnderlyingToken={poolInfo.underlyingMint}
           withdrawAmount={withdrawnAmount}
+          option={selectedOption}
           handleAction={handleCloseFlow}
         />
       )}

package/src/components/TxDoneModal.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
 import { txAtom } from '@huma-finance/web-shared'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
 import { useResetAtom } from 'jotai/utils'
 import React, { useCallback } from 'react'
 
@@ -8,7 +8,7 @@ import { resetState } from '../store/widgets.reducers'
 import { CheckIcon } from './icons'
 
 type Props = {
-  content: string[]
+  content: (string | React.ReactNode)[]
   subContent?: string[]
   buttonText?: string
   handleAction: () => void
@@ -77,7 +77,7 @@ export function TxDoneModal({
       </Box>
       <Box css={styles.content}>
         {content.map((item) => (
-          <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+          <Box sx={{ marginTop: theme.spacing(1) }} key={item?.toString()}>
             {item}
           </Box>
         ))}

package/src/components/WidgetWrapper.tsx

@@ -17,6 +17,7 @@ type Props = {
   isOpen: boolean
   isLoading?: boolean
   loadingTitle?: string
+  width?: string
   handleClose: () => void
   handleSuccess?: (blockNumber: number) => void
 }
@@ -25,6 +26,7 @@ export function WidgetWrapper({
   isOpen,
   isLoading = false,
   loadingTitle = '',
+  width = '480px',
   handleClose,
   handleSuccess,
   children,
@@ -67,7 +69,7 @@ export function WidgetWrapper({
       isOpen={isOpen}
       overflowY='auto'
       onClose={handleCloseModal}
-      width='480px'
+      width={width}
       padding={theme.spacing(4, 5)}
       disableBackdropClick
     >

package/src/components/icons/huma-no-empty-space.svg

@@ -0,0 +1,15 @@
+<svg viewBox="2.5 4.3 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="11.2676" y="14.5305" width="11.2329" height="3.7961" fill="#B246FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5496 4.36143C13.8705 2.70849 7.6775 5.39263 5.09814 10.9144C2.51877 16.4362 4.43722 22.9028 9.35286 26.1903L15.2227 13.6244L19.5496 4.36143Z" fill="url(#paint0_linear_623_5197)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7575 5.80971C27.6731 9.09723 29.5916 15.5638 27.0122 21.0856C24.4328 26.6074 18.2399 29.2915 12.5607 27.6386L18.4305 15.0727L22.7575 5.80971Z" fill="url(#paint1_linear_623_5197)"/>
+<defs>
+<linearGradient id="paint0_linear_623_5197" x1="18.5668" y1="6.46542" x2="-11.3801" y2="2.80595" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B246FF"/>
+<stop offset="1" stop-color="#FF6A8A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_623_5197" x1="21.7747" y1="7.9137" x2="43.7938" y2="28.5207" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B246FF"/>
+<stop offset="1" stop-color="#FF6A8A"/>
+</linearGradient>
+</defs>
+</svg>