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

package/dist/src/components/Lend/solanaWithdraw/1-Option.d.ts

@@ -0,0 +1,12 @@
+import { UnderlyingTokenInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+import { ClaimAndStakeOption } from '.';
+type Props = {
+    poolUnderlyingToken: UnderlyingTokenInfo;
+    withdrawableAmountFormatted: string | number;
+    selectedOption: ClaimAndStakeOption;
+    setSelectedOption: (option: ClaimAndStakeOption) => void;
+    handleConfirmOption: () => void;
+};
+export declare function Option({ poolUnderlyingToken, withdrawableAmountFormatted, selectedOption, setSelectedOption, handleConfirmOption, }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/solanaWithdraw/2-WithdrawAndDepositConfirm.d.ts

@@ -0,0 +1,15 @@
+import { BN } from '@coral-xyz/anchor';
+import { PermissionlessDepositCommitment, PermissionlessDepositMode, SolanaChainEnum } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    chainId: SolanaChainEnum;
+    withdrawableAmount: BN;
+    withdrawableAmountFormatted: string | number;
+    selectedDepositMode: PermissionlessDepositMode;
+    selectedDepositCommitment: PermissionlessDepositCommitment;
+    setSelectedDepositMode: (mode: PermissionlessDepositMode) => void;
+    setSelectedDepositCommitment: (commitment: PermissionlessDepositCommitment) => void;
+    withdrawAndDeposit: () => void;
+};
+export declare function WithdrawAndDepositConfirm({ chainId, withdrawableAmount, withdrawableAmountFormatted, selectedDepositMode, selectedDepositCommitment, setSelectedDepositMode, setSelectedDepositCommitment, withdrawAndDeposit, }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/solanaWithdraw/{1-ConfirmTransfer.d.ts → 3-WithdrawOnlyConfirm.d.ts}

@@ -5,5 +5,5 @@ type Props = {
     withdrawableAmountFormatted: string | number;
     sharePrice: number;
 };
-export declare function ConfirmTransfer({ poolUnderlyingToken, withdrawableAmountFormatted, sharePrice, }: Props): React.ReactElement;
+export declare function WithdrawOnlyConfirm({ poolUnderlyingToken, withdrawableAmountFormatted, sharePrice, }: Props): React.ReactElement;
 export {};

package/dist/src/components/Lend/solanaWithdraw/4-TransferAndDeposit.d.ts

@@ -0,0 +1,13 @@
+import { BN } from '@coral-xyz/anchor';
+import { PermissionlessDepositCommitment, PermissionlessDepositMode, SolanaPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: SolanaPoolInfo;
+    selectedTranche: TrancheType;
+    poolIsClosed: boolean;
+    permissionlessMode: PermissionlessDepositMode;
+    withdrawableAmount: BN;
+    depositCommitment: PermissionlessDepositCommitment;
+};
+export declare function TransferAndDeposit({ poolInfo, selectedTranche, poolIsClosed, permissionlessMode, withdrawableAmount, depositCommitment, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/Lend/solanaWithdraw/{3-Done.d.ts → 6-Done.d.ts}

@@ -1,10 +1,12 @@
 import { BN } from '@coral-xyz/anchor';
 import { UnderlyingTokenInfo } from '../../../../../huma-shared/src';
 import { default as React } from 'react';
+import { ClaimAndStakeOption } from '.';
 type Props = {
     poolUnderlyingToken: UnderlyingTokenInfo;
     withdrawAmount: BN;
+    option: ClaimAndStakeOption;
     handleAction: () => void;
 };
-export declare function Done({ poolUnderlyingToken, withdrawAmount, handleAction, }: Props): React.ReactElement;
+export declare function Done({ poolUnderlyingToken, withdrawAmount, option, handleAction, }: Props): React.ReactElement;
 export {};

package/dist/src/components/Lend/solanaWithdraw/components/Apy.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+type Props = {
+    usdcApy: number | undefined;
+    humaRewardsApy: number | undefined;
+};
+export declare function Apy({ usdcApy, humaRewardsApy }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/solanaWithdraw/components/Benefit.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Benefit(): React.ReactElement;

package/dist/src/components/Lend/solanaWithdraw/components/CommitSwitcher.d.ts

@@ -0,0 +1,12 @@
+import { SerializedStyles } from '@emotion/react';
+import { PermissionlessDepositCommitment } from '../../../../../../huma-shared/src';
+import { ReactElement } from 'react';
+interface Props {
+    selectedCommitment: PermissionlessDepositCommitment;
+    commitments: PermissionlessDepositCommitment[];
+    totalApy: number | undefined;
+    styles?: SerializedStyles;
+    onCommitmentChange: (commitment: PermissionlessDepositCommitment) => void;
+}
+export declare function CommitSwitcher({ selectedCommitment, commitments, totalApy, styles: extraStyles, onCommitmentChange, }: Props): ReactElement;
+export {};

package/dist/src/components/Lend/solanaWithdraw/components/ModeSelector.d.ts

@@ -0,0 +1,12 @@
+import { PermissionlessDepositMode } from '../../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    classicModeTargetApy: number | undefined;
+    maxiModeTargetApy: number | undefined;
+    classicHumaRewardsApy: number | undefined;
+    maxiHumaRewardsApy: number | undefined;
+    selectedDepositMode: PermissionlessDepositMode;
+    setSelectedDepositMode: (mode: PermissionlessDepositMode) => void;
+};
+export declare function ModeSelector({ classicModeTargetApy, maxiModeTargetApy, classicHumaRewardsApy, maxiHumaRewardsApy, selectedDepositMode, setSelectedDepositMode, }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/solanaWithdraw/components/SelectModeTitle.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function SelectModeTitle(): React.ReactElement;

package/dist/src/components/Lend/solanaWithdraw/index.d.ts

@@ -2,6 +2,16 @@ import { SolanaPoolInfo, TrancheType } from '../../../../../huma-shared/src';
 import { LenderStateAccount, SolanaPoolState } from '../../../../../huma-web-shared/src';
 import { default as React } from 'react';
 import { Mint } from '@solana/spl-token';
+export declare enum WithdrawOption {
+    WITHDRAW_AND_REDEPOSIT = "withdraw-and-redeposit",
+    WITHDRAW_ONLY = "withdraw-only"
+}
+export type ClaimAndStakeOption = {
+    label: string;
+    description?: string[];
+    id: string;
+};
+export declare const ClaimAndStakeOptions: ClaimAndStakeOption[];
 /**
  * Solana lend pool withdraw props
  * @typedef {Object} SolanaLendWithdrawProps

package/dist/src/components/TxDoneModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 type Props = {
-    content: string[];
+    content: (string | React.ReactNode)[];
     subContent?: string[];
     buttonText?: string;
     handleAction: () => void;

package/dist/src/components/WidgetWrapper.d.ts

@@ -4,8 +4,9 @@ type Props = {
     isOpen: boolean;
     isLoading?: boolean;
     loadingTitle?: string;
+    width?: string;
     handleClose: () => void;
     handleSuccess?: (blockNumber: number) => void;
 };
-export declare function WidgetWrapper({ isOpen, isLoading, loadingTitle, handleClose, handleSuccess, children, }: WCProps<Props>): React.ReactElement | null;
+export declare function WidgetWrapper({ isOpen, isLoading, loadingTitle, width, handleClose, handleSuccess, children, }: WCProps<Props>): React.ReactElement | null;
 export {};

package/dist/src/components/icons/index.d.ts

@@ -1,6 +1,7 @@
 import { SvgIconProps } from '@mui/material';
 export declare function HumaIcon(props: SvgIconProps): React.ReactElement;
 export declare function HumaFullIcon(props: SvgIconProps): React.ReactElement;
+export declare function HumaNoEmptySpaceIcon(props: SvgIconProps): React.ReactElement;
 export declare function MetamaskIcon(props: SvgIconProps): React.ReactElement;
 export declare function WalletConnectIcon(props: SvgIconProps): React.ReactElement;
 export declare function EthereumIcon(props: SvgIconProps): React.ReactElement;
@@ -20,4 +21,10 @@ export declare function CeloIcon(props: SvgIconProps): React.ReactElement;
 export declare function CongratulationsIcon(props: SvgIconProps): React.ReactElement;
 export declare function RibbonIcon(props: SvgIconProps): React.ReactElement;
 export declare function HumaPointsIcon(props: SvgIconProps): React.ReactElement;
+export declare function ModeClassicIcon(props: SvgIconProps): React.ReactElement;
+export declare function ModeMaxiIcon(props: SvgIconProps): React.ReactElement;
+export declare function MinusSignIcon(props: SvgIconProps): React.ReactElement;
+export declare function PlusSignIcon(props: SvgIconProps): React.ReactElement;
+export declare function MinusSignInactiveIcon(props: SvgIconProps): React.ReactElement;
+export declare function PlusSignInactiveIcon(props: SvgIconProps): React.ReactElement;
 export declare function getIcon(icon: string): typeof UsdcIcon | null;

package/dist/src/store/widgets.store.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.78-beta.1034+e02a521",
+  "version": "0.0.78-beta.1044+24ff73d",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,9 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.78-beta.1034+e02a521",
-    "@huma-finance/shared": "^0.0.78-beta.1034+e02a521",
-    "@huma-finance/web-shared": "^0.0.78-beta.1034+e02a521",
+    "@huma-finance/sdk": "^0.0.78-beta.1044+24ff73d",
+    "@huma-finance/shared": "^0.0.78-beta.1044+24ff73d",
+    "@huma-finance/web-shared": "^0.0.78-beta.1044+24ff73d",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -190,5 +190,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "e02a52193209d287a17f8af087c65928ac5a8467"
+  "gitHead": "24ff73d70fb62e039002e258535f1c126869f30d"
 }

package/src/components/Lend/solanaWithdraw/1-Option.tsx

@@ -0,0 +1,180 @@
+import { UnderlyingTokenInfo } from '@huma-finance/shared'
+import { useMQ } from '@huma-finance/web-shared'
+import CheckIcon from '@mui/icons-material/Check'
+import {
+  Box,
+  css,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+import { ClaimAndStakeOption, ClaimAndStakeOptions, WithdrawOption } from '.'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  withdrawableAmountFormatted: string | number
+  selectedOption: ClaimAndStakeOption
+  setSelectedOption: (option: ClaimAndStakeOption) => void
+  handleConfirmOption: () => void
+}
+
+export function Option({
+  poolUnderlyingToken,
+  withdrawableAmountFormatted,
+  selectedOption,
+  setSelectedOption,
+  handleConfirmOption,
+}: Props): React.ReactElement {
+  useLogOnFirstMount('SelectWithdrawOption')
+  const theme = useTheme()
+  const { isSmSize } = useMQ()
+  const { symbol } = poolUnderlyingToken
+
+  const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const option = ClaimAndStakeOptions.find(
+      (option) => option.id === event.target.value,
+    )
+    if (option) {
+      setSelectedOption(option)
+    }
+  }
+
+  const styles = {
+    amount: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 24px;
+      font-weight: 700;
+      color: ${theme.palette.text.primary};
+      margin-top: ${theme.spacing(5)};
+    `,
+    radioGroup: css`
+      margin-top: ${theme.spacing(isSmSize ? 3 : 5)};
+    `,
+    radioButtonContainer: css`
+      padding: ${theme.spacing(0.125)};
+      border-radius: 8px;
+      margin-bottom: ${theme.spacing(2)};
+    `,
+    radioButton: css`
+      margin-bottom: ${theme.spacing(2)};
+      background: #1b1b1b;
+      width: 100%;
+      margin: 0;
+      border-radius: 8px;
+      padding: ${theme.spacing(2, 0.5)};
+    `,
+    radio: css`
+      color: ${theme.palette.text.tertiary};
+    `,
+    radioButtonActive: css`
+      background: linear-gradient(190deg, #d157ff 4.58%, #74deff 100%);
+      box-shadow: 2px 2px 24px 1px #272727;
+    `,
+    radioActive: css`
+      color: #c677ff !important;
+    `,
+    actionButton: css`
+      margin-top: ${theme.spacing(4)};
+    `,
+    description: css`
+      margin-top: ${theme.spacing(0.5)};
+    `,
+    descriptionList: css`
+      margin: 0;
+      padding-left: ${theme.spacing(0)};
+      list-style-type: none;
+    `,
+    descriptionItem: css`
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: ${theme.spacing(0.5)};
+      line-height: 18px;
+      gap: ${theme.spacing(1)};
+    `,
+    checkIcon: css`
+      width: 16px;
+      height: 16px;
+      margin-top: 1px;
+      flex-shrink: 0;
+      color: #27db63;
+    `,
+    label: css`
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+    `,
+    descriptionText: css`
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      color: #999;
+    `,
+  }
+
+  return (
+    <WrapperModal title={`Withdraw ${symbol}`}>
+      <Box css={styles.amount}>${withdrawableAmountFormatted}</Box>
+      <RadioGroup
+        value={selectedOption.id}
+        onChange={handleOptionChange}
+        css={styles.radioGroup}
+      >
+        {ClaimAndStakeOptions.map((option) => {
+          const isActive = selectedOption.id === option.id
+          return (
+            <Box
+              key={option.id}
+              css={[
+                styles.radioButtonContainer,
+                isActive && styles.radioButtonActive,
+              ]}
+            >
+              <FormControlLabel
+                css={styles.radioButton}
+                value={option.id}
+                control={
+                  <Radio css={[styles.radio, isActive && styles.radioActive]} />
+                }
+                label={
+                  <Box>
+                    <Box css={styles.label}>{option.label}</Box>
+                    {option.description && (
+                      <ul css={styles.descriptionList}>
+                        {option.description.map((description) => (
+                          <li key={description} css={styles.descriptionItem}>
+                            {option.id ===
+                              WithdrawOption.WITHDRAW_AND_REDEPOSIT && (
+                              <CheckIcon css={styles.checkIcon} />
+                            )}
+                            <Box component='span' css={styles.descriptionText}>
+                              {description}
+                            </Box>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </Box>
+                }
+              />
+            </Box>
+          )
+        })}
+      </RadioGroup>
+      <BottomButton variant='contained' onClick={handleConfirmOption}>
+        {selectedOption.id === WithdrawOption.WITHDRAW_AND_REDEPOSIT
+          ? 'WITHDRAW AND REDEPOSIT'
+          : 'WITHDRAW'}
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/Lend/solanaWithdraw/2-WithdrawAndDepositConfirm.tsx

@@ -0,0 +1,208 @@
+import { BN } from '@coral-xyz/anchor'
+import {
+  PermissionlessDepositCommitment,
+  PermissionlessDepositMode,
+  SolanaChainEnum,
+} from '@huma-finance/shared'
+import { usePermissionlessApy } from '@huma-finance/web-shared'
+import InfoOutlineIcon from '@mui/icons-material/InfoOutlined'
+import { Box, Button, css, Divider, Tooltip, useTheme } from '@mui/material'
+import React from 'react'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
+import { WrapperModal } from '../../WrapperModal'
+import { Apy } from './components/Apy'
+import { Benefit } from './components/Benefit'
+import { CommitSwitcher } from './components/CommitSwitcher'
+import { ModeSelector } from './components/ModeSelector'
+import { SelectModeTitle } from './components/SelectModeTitle'
+
+type Props = {
+  chainId: SolanaChainEnum
+  withdrawableAmount: BN
+  withdrawableAmountFormatted: string | number
+  selectedDepositMode: PermissionlessDepositMode
+  selectedDepositCommitment: PermissionlessDepositCommitment
+  setSelectedDepositMode: (mode: PermissionlessDepositMode) => void
+  setSelectedDepositCommitment: (
+    commitment: PermissionlessDepositCommitment,
+  ) => void
+  withdrawAndDeposit: () => void
+}
+
+export function WithdrawAndDepositConfirm({
+  chainId,
+  withdrawableAmount,
+  withdrawableAmountFormatted,
+  selectedDepositMode,
+  selectedDepositCommitment,
+  setSelectedDepositMode,
+  setSelectedDepositCommitment,
+  withdrawAndDeposit,
+}: Props): React.ReactElement {
+  useLogOnFirstMount('ConfirmTransferAndRedeposit')
+  const theme = useTheme()
+
+  const {
+    modeTargetApy: classicModeTargetApy,
+    humaRewardsApy: classicHumaRewardsApy,
+  } = usePermissionlessApy(
+    chainId,
+    PermissionlessDepositMode.CLASSIC,
+    selectedDepositCommitment,
+    withdrawableAmount,
+  )
+  const {
+    modeTargetApy: maxiModeTargetApy,
+    humaRewardsApy: maxiHumaRewardsApy,
+  } = usePermissionlessApy(
+    chainId,
+    PermissionlessDepositMode.MAXI,
+    selectedDepositCommitment,
+    withdrawableAmount,
+  )
+
+  const styles = {
+    title: css`
+      font-weight: 400;
+      font-size: 20px;
+      color: #ececec;
+      font-weight: 700;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(-1)};
+    `,
+    description: css`
+      font-weight: 400;
+      font-size: 14px;
+      color: #999;
+      margin-top: ${theme.spacing(1)};
+    `,
+    availableToWithdraw: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: ${theme.spacing(1)};
+      font-weight: 400;
+      font-size: 16px;
+      color: #999;
+      background: #1b1b1b;
+      padding: ${theme.spacing(2)};
+      border-radius: 8px;
+      height: 60px;
+    `,
+    availableToWithdrawTitle: css`
+      font-weight: 500;
+      font-size: 16px;
+      color: #b8b8b8;
+    `,
+    availableToWithdrawAmount: css`
+      font-size: 24px;
+      font-weight: 700;
+      color: #ececec;
+    `,
+    selectDepositMode: css`
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: ${theme.spacing(3)};
+      gap: ${theme.spacing(0.5)};
+    `,
+    selectDepositModeTitle: css`
+      font-weight: 700;
+      font-size: 16px;
+      color: #b8b8b8;
+    `,
+    infoIcon: css`
+      width: 16px;
+      height: 16px;
+      color: #686868;
+    `,
+    lockupTitle: css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(2)};
+    `,
+    commitSwitcher: css`
+      margin-top: ${theme.spacing(2)};
+    `,
+    divider: css`
+      margin-top: ${theme.spacing(2)};
+      border-color: #222;
+    `,
+    buttonContainer: css`
+      width: 100%;
+      margin-top: ${theme.spacing(2)};
+
+      button {
+        width: 100%;
+      }
+    `,
+  }
+
+  return (
+    <WrapperModal title=''>
+      <Box css={styles.title}>Withdraw and redeposit to Permissionless</Box>
+      <Box css={styles.availableToWithdraw}>
+        <Box css={styles.availableToWithdrawTitle}>Available to withdraw</Box>
+        <Box css={styles.availableToWithdrawAmount}>
+          ${withdrawableAmountFormatted}
+        </Box>
+      </Box>
+      <SelectModeTitle />
+      <ModeSelector
+        classicModeTargetApy={classicModeTargetApy}
+        maxiModeTargetApy={maxiModeTargetApy}
+        classicHumaRewardsApy={classicHumaRewardsApy}
+        maxiHumaRewardsApy={maxiHumaRewardsApy}
+        selectedDepositMode={selectedDepositMode}
+        setSelectedDepositMode={setSelectedDepositMode}
+      />
+      <Box css={styles.lockupTitle}>
+        <Box>Lockup to earn more yield</Box>
+        <Tooltip
+          title='Rewards are based on your engagement with the Huma protocol.'
+          placement='top'
+        >
+          <InfoOutlineIcon css={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+      <Box css={styles.commitSwitcher}>
+        <CommitSwitcher
+          selectedCommitment={selectedDepositCommitment}
+          commitments={Object.values(PermissionlessDepositCommitment)}
+          totalApy={
+            selectedDepositMode === PermissionlessDepositMode.CLASSIC
+              ? (classicModeTargetApy ?? 0) + (classicHumaRewardsApy ?? 0)
+              : (maxiModeTargetApy ?? 0) + (maxiHumaRewardsApy ?? 0)
+          }
+          onCommitmentChange={setSelectedDepositCommitment}
+        />
+      </Box>
+      <Divider css={styles.divider} />
+      <Apy
+        usdcApy={
+          selectedDepositMode === PermissionlessDepositMode.CLASSIC
+            ? classicModeTargetApy
+            : maxiModeTargetApy
+        }
+        humaRewardsApy={
+          selectedDepositMode === PermissionlessDepositMode.CLASSIC
+            ? classicHumaRewardsApy
+            : maxiHumaRewardsApy
+        }
+      />
+      <Box css={styles.buttonContainer}>
+        <Button variant='contained' onClick={withdrawAndDeposit}>
+          WITHDRAW AND DEPOSIT
+        </Button>
+      </Box>
+      <Benefit />
+    </WrapperModal>
+  )
+}

package/src/components/Lend/solanaWithdraw/{1-ConfirmTransfer.tsx → 3-WithdrawOnlyConfirm.tsx}

@@ -2,11 +2,11 @@ import { UnderlyingTokenInfo } from '@huma-finance/shared'
 import { Box, Divider, css, useTheme } from '@mui/material'
 import React from 'react'
 import { useDispatch } from 'react-redux'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
-import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
@@ -14,7 +14,7 @@ type Props = {
   sharePrice: number
 }
 
-export function ConfirmTransfer({
+export function WithdrawOnlyConfirm({
   poolUnderlyingToken,
   withdrawableAmountFormatted,
   sharePrice,