diff --git a/packages/widget/src/hooks/useSetContentHeight.ts b/packages/widget/src/hooks/useSetContentHeight.ts index 5efe0918e..c8f041751 100644 --- a/packages/widget/src/hooks/useSetContentHeight.ts +++ b/packages/widget/src/hooks/useSetContentHeight.ts @@ -8,9 +8,11 @@ import { useDefaultElementId } from './useDefaultElementId.js' // CSS changes in those components can have implications for the functionality in this hook export const useSetContentHeight = ( - ref: MutableRefObject + ref: MutableRefObject, + dependency?: unknown ) => { const elementId = useDefaultElementId() + // biome-ignore lint/correctness/useExhaustiveDependencies: we use dependency to refresh height useLayoutEffect(() => { const relativeContainer = getRelativeContainer(elementId) if ( @@ -24,5 +26,5 @@ export const useSetContentHeight = ( return () => { relativeContainer.style.removeProperty('min-height') } - }, [elementId, ref]) + }, [elementId, ref, dependency]) } diff --git a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx index e57966684..3c8408cfd 100644 --- a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx +++ b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx @@ -1,13 +1,14 @@ import { Info, Wallet, Warning } from '@mui/icons-material' import { Box, Button, Typography } from '@mui/material' import type { MutableRefObject } from 'react' -import { forwardRef } from 'react' +import { forwardRef, useRef } from 'react' import { useTranslation } from 'react-i18next' import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js' import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js' import type { BottomSheetBase } from '../../components/BottomSheet/types.js' import { useIsContractAddress } from '../../hooks/useIsContractAddress.js' import { useNavigateBack } from '../../hooks/useNavigateBack.js' +import { useSetContentHeight } from '../../hooks/useSetContentHeight.js' import type { Bookmark } from '../../stores/bookmarks/types.js' import { useFieldActions } from '../../stores/form/useFieldActions.js' import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js' @@ -25,10 +26,31 @@ interface ConfirmAddressSheetProps { chainId?: number } +interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps { + onClose: () => void +} + export const ConfirmAddressSheet = forwardRef< BottomSheetBase, ConfirmAddressSheetProps ->(({ validatedBookmark, onConfirm, chainId }, ref) => { +>((props, ref) => { + const handleClose = () => { + ;(ref as MutableRefObject).current?.close() + } + + return ( + + + + ) +}) + +const ConfirmAddressSheetContent: React.FC = ({ + validatedBookmark, + onConfirm, + chainId, + onClose, +}) => { const { t } = useTranslation() const { navigateBack } = useNavigateBack() const { setFieldValue } = useFieldActions() @@ -39,9 +61,8 @@ export const ConfirmAddressSheet = forwardRef< validatedBookmark?.chainType ) - const handleClose = () => { - ;(ref as MutableRefObject).current?.close() - } + const containerRef = useRef(null) + useSetContentHeight(containerRef, isContractAddress) const handleConfirm = () => { if (validatedBookmark) { @@ -51,63 +72,61 @@ export const ConfirmAddressSheet = forwardRef< }) onConfirm?.(validatedBookmark) setSendToWallet(true) - handleClose() + onClose() navigateBack() } } return ( - - - - - - {t('sendToWallet.confirmWalletAddress')} - - {validatedBookmark?.name ? ( - - {validatedBookmark?.name} + + + + + {t('sendToWallet.confirmWalletAddress')} + + {validatedBookmark?.name ? ( + + {validatedBookmark?.name} + + ) : null} + {validatedBookmark?.address} + + + + {t('info.message.fundsToExchange')} - ) : null} - {validatedBookmark?.address} - + + } + icon={} + multiline + /> + {isContractAddress ? ( - - {t('info.message.fundsToExchange')} - - + + {t('info.message.smartContractAccount')} + } - icon={} + icon={} + severity="warning" multiline /> - {isContractAddress ? ( - - {t('info.message.smartContractAccount')} - - } - icon={} - severity="warning" - multiline - /> - ) : null} - - - - - - + ) : null} + + + + + ) -}) +}