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

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>

package/src/components/icons/index.tsx

@@ -1,25 +1,32 @@
 import { SvgIconProps } from '@mui/material'
-import HumaLogoSvg from './huma.svg?react'
+import ApproveLenderSvg from './approve-lender.svg?react'
+import AutoPaybackSvg from './auto-payback.svg?react'
+import CeloSvg from './celo.svg?react'
+import CheckCircleSvg from './check-circle.svg?react'
+import CheckGreenSvg from './check-green.svg?react'
+import CheckSvg from './check.svg?react'
+import CongratulationsSvg from './congratulations.svg?react'
+import DonutSvg from './donut.svg?react'
+import EthereumSvg from './ethereum.svg?react'
 import HumaFullLogoSvg from './huma-full.svg?react'
+import HumaNoEmptySpaceSvg from './huma-no-empty-space.svg?react'
+import HumaPointsSvg from './huma-points.svg?react'
+import HumaLogoSvg from './huma.svg?react'
+import LoaderSvg from './loader.svg?react'
 import MetamaskSvg from './metamask.svg?react'
-import WalletConnectSvg from './wallet-connect.svg?react'
-import EthereumSvg from './ethereum.svg?react'
+import MinusSignInactiveSvg from './minus-sign-inactive.svg?react'
+import MinusSignSvg from './minus-sign.svg?react'
+import ModeClassicSvg from './mode-classic.svg?react'
+import ModeMaxiSvg from './mode-maxi.svg?react'
+import PlusSignInactiveSvg from './plus-sign-inactive.svg?react'
+import PlusSignSvg from './plus-sign.svg?react'
 import PolygonSvg from './polygon.svg?react'
 import ReceiptSvg from './receipt.svg?react'
+import RibbonSvg from './ribbon.svg?react'
 import SeparatorSvg from './separator.svg?react'
-import LoaderSvg from './loader.svg?react'
 import SorrySvg from './sorry.svg?react'
-import CheckSvg from './check.svg?react'
-import CheckGreenSvg from './check-green.svg?react'
-import CheckCircleSvg from './check-circle.svg?react'
-import AutoPaybackSvg from './auto-payback.svg?react'
-import ApproveLenderSvg from './approve-lender.svg?react'
-import DonutSvg from './donut.svg?react'
 import UsdcSvg from './usdc.svg?react'
-import CeloSvg from './celo.svg?react'
-import CongratulationsSvg from './congratulations.svg?react'
-import RibbonSvg from './ribbon.svg?react'
-import HumaPointsSvg from './huma-points.svg?react'
+import WalletConnectSvg from './wallet-connect.svg?react'
 
 export function HumaIcon(props: SvgIconProps): React.ReactElement {
   return <HumaLogoSvg {...props} />
@@ -29,6 +36,10 @@ export function HumaFullIcon(props: SvgIconProps): React.ReactElement {
   return <HumaFullLogoSvg {...props} />
 }
 
+export function HumaNoEmptySpaceIcon(props: SvgIconProps): React.ReactElement {
+  return <HumaNoEmptySpaceSvg {...props} />
+}
+
 export function MetamaskIcon(props: SvgIconProps): React.ReactElement {
   return <MetamaskSvg {...props} />
 }
@@ -105,6 +116,30 @@ export function HumaPointsIcon(props: SvgIconProps): React.ReactElement {
   return <HumaPointsSvg {...props} />
 }
 
+export function ModeClassicIcon(props: SvgIconProps): React.ReactElement {
+  return <ModeClassicSvg {...props} />
+}
+
+export function ModeMaxiIcon(props: SvgIconProps): React.ReactElement {
+  return <ModeMaxiSvg {...props} />
+}
+
+export function MinusSignIcon(props: SvgIconProps): React.ReactElement {
+  return <MinusSignSvg {...props} />
+}
+
+export function PlusSignIcon(props: SvgIconProps): React.ReactElement {
+  return <PlusSignSvg {...props} />
+}
+
+export function MinusSignInactiveIcon(props: SvgIconProps): React.ReactElement {
+  return <MinusSignInactiveSvg {...props} />
+}
+
+export function PlusSignInactiveIcon(props: SvgIconProps): React.ReactElement {
+  return <PlusSignInactiveSvg {...props} />
+}
+
 export function getIcon(icon: string) {
   if (!icon) return null
 

package/src/components/icons/minus-sign-inactive.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="61" viewBox="0 0 60 61" fill="none">
+  <circle cx="30" cy="30.8257" r="30" fill="white" fill-opacity="0.05"/>
+  <path d="M21 32.8257V28.8257H39V32.8257H21Z" fill="#464646"/>
+</svg>

package/src/components/icons/minus-sign.svg

@@ -0,0 +1,14 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="30" cy="30" r="29.5" fill="white" fill-opacity="0.05" stroke="url(#paint0_linear_9564_1347)"/>
+<path d="M21 32V28H39V32H21Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_9564_1347" x1="60" y1="5.78314" x2="3.23158e-06" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C733FF"/>
+<stop offset="1" stop-color="#74DEFF"/>
+<linearGradient id="paint1_linear_11507_28492" x1="39" y1="28.3855" x2="37.1353" y2="35.9681" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C733FF"/>
+<stop offset="1" stop-color="#74DEFF"/>
+</linearGradient>
+</linearGradient>
+</defs>
+</svg>

package/src/components/icons/mode-classic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M22.29 21.355C22.29 21.7112 22.0013 22 21.645 22H1.64502C1.28879 22 1 21.7112 1 21.355C1 20.9987 1.28879 20.71 1.64502 20.71H21.645C22.0013 20.71 22.29 20.9987 22.29 21.355ZM5.5166 17.1289C5.5166 17.6812 5.06889 18.1289 4.5166 18.1289H2C1.44772 18.1289 1 17.6812 1 17.1289V8.80664C1 8.25436 1.44772 7.80664 2 7.80664H4.5166C5.06889 7.80664 5.5166 8.25436 5.5166 8.80664V17.1289ZM13.9033 17.1289C13.9033 17.6812 13.4556 18.1289 12.9033 18.1289H10.3867C9.83443 18.1289 9.38672 17.6812 9.38672 17.1289V6.22559C9.38672 5.6733 9.83443 5.22559 10.3867 5.22559H12.9033C13.4556 5.22559 13.9033 5.6733 13.9033 6.22559V17.1289ZM22.29 17.1289C22.29 17.6812 21.8423 18.1289 21.29 18.1289H18.7744C18.2221 18.1289 17.7744 17.6812 17.7744 17.1289V3C17.7744 2.44772 18.2221 2 18.7744 2H21.29C21.8423 2 22.29 2.44772 22.29 3V17.1289Z" fill="#74DEFF"/>
+</svg>

package/src/components/icons/mode-maxi.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M7.20774 19.856C6.41674 20.647 3.66272 21.3501 3.11872 21.4831C3.07872 21.4931 3.03974 21.4971 2.99974 21.4971C2.86674 21.4971 2.73774 21.444 2.64274 21.347C2.51874 21.221 2.47173 21.0391 2.51673 20.8681C2.66773 20.3011 3.45874 17.4301 4.24574 16.6431C4.68874 16.2001 5.26375 15.9721 5.84175 15.9781C6.40075 15.9911 6.93773 16.2281 7.35273 16.6431C8.19873 17.4901 8.13374 18.931 7.20774 19.856ZM17.2077 14.7291L16.9497 16.3C16.6497 18.19 15.3497 19.8001 13.5697 20.5101L11.1897 21.4601C11.1297 21.4901 11.0597 21.5001 10.9997 21.5001C10.8897 21.5001 10.7697 21.4601 10.6797 21.3801C10.5397 21.2701 10.4697 21.0801 10.5097 20.9001L11.1727 17.5641C11.0757 17.5831 10.9837 17.6091 10.8847 17.6261C10.7627 17.6471 10.6397 17.6571 10.5177 17.6571C9.93374 17.6571 9.35973 17.4201 8.92973 16.9911L7.00773 15.0681C6.48773 14.5481 6.25072 13.8181 6.37272 13.1131C6.38972 13.0161 6.41573 12.9251 6.43373 12.8291L3.11872 13.4881C3.08872 13.4981 3.04875 13.498 3.01875 13.498C2.86875 13.498 2.72874 13.4381 2.63874 13.3181C2.51874 13.1781 2.48873 12.9781 2.55873 12.8081L3.51875 10.4181C4.21875 8.64806 5.82873 7.34807 7.71873 7.04807L9.26972 6.78906C11.8307 3.85206 15.8527 2.24707 20.9977 2.24707C21.4117 2.24707 21.7477 2.58307 21.7477 2.99707C21.7497 8.14607 20.1457 12.1681 17.2077 14.7291ZM18.9687 9.69507C18.8147 7.18507 16.8137 5.18506 14.3037 5.03006C11.4047 6.27906 8.66075 8.70106 7.85075 13.3701C7.81275 13.5911 7.89574 13.835 8.06874 14.007L9.99073 15.9301C10.1627 16.1021 10.4077 16.1841 10.6287 16.1471C15.2987 15.3381 17.7207 12.5951 18.9687 9.69507ZM13.4997 8.25006C12.2567 8.25006 11.2497 9.25706 11.2497 10.5001C11.2497 11.7431 12.2567 12.7501 13.4997 12.7501C14.7427 12.7501 15.7497 11.7431 15.7497 10.5001C15.7497 9.25706 14.7427 8.25006 13.4997 8.25006Z" fill="#C677FF"/>
+</svg>

package/src/components/icons/plus-sign-inactive.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="61" viewBox="0 0 60 61" fill="none">
+  <circle cx="30" cy="30.8257" r="30" fill="white" fill-opacity="0.05"/>
+  <path d="M28.576 37.47V31.486H23V27.984H28.576V22H32.18V27.984H37.756V31.486H32.18V37.47H28.576Z" fill="#464646"/>
+</svg>

package/src/components/icons/plus-sign.svg

@@ -0,0 +1,14 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="30" cy="30" r="29.5" fill="white" fill-opacity="0.05" stroke="url(#paint0_linear_9564_1363)"/>
+<path d="M28.576 37.47V31.486H23V27.984H28.576V22H32.18V27.984H37.756V31.486H32.18V37.47H28.576Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_9564_1363" x1="60" y1="5.78314" x2="3.23158e-06" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C733FF"/>
+<stop offset="1" stop-color="#74DEFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_11507_28493" x1="37.756" y1="23.4911" x2="22.3766" y2="36.7467" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C733FF"/>
+<stop offset="1" stop-color="#74DEFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/hooks/useLogOnFirstMount.ts

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react'
 import { LoggingActions } from '@huma-finance/web-shared'
+import { useEffect, useRef } from 'react'
 import { selectWidgetLoggingContext } from '../store/widgets.selectors'
 import { useAppSelector } from './useRedux'
 

package/src/store/widgets.store.ts

@@ -17,6 +17,9 @@ export enum WIDGET_STEP {
   Permit = 'Permit',
   ApproveAllowance = 'ApproveAllowance',
   MintNFT = 'MintNFT',
+  Option = 'Option',
+  ConfirmWithdrawAndDeposit = 'ConfirmWithdrawAndDeposit',
+  ConfirmWithdrawOnly = 'ConfirmWithdrawOnly',
   ConfirmTransfer = 'ConfirmTransfer',
   ApproveNFT = 'ApproveNFT',
   Transfer = 'Transfer',