fix: address confirmation bottom sheet height

lifinance · Jan 23, 2025 · 59d034b · 59d034b
1 parent 8449045
commit 59d034b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 55 deletions.
diff --git 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<HTMLElement | null>
+  ref: MutableRefObject<HTMLElement | null>,
+  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
@@ -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<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref}>
+      <ConfirmAddressSheetContent {...props} onClose={handleClose} />
+    </BottomSheet>
+  )
+})
+
+const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
+  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<BottomSheetBase>).current?.close()
-  }
+  const containerRef = useRef<HTMLElement>(null)
+  useSetContentHeight(containerRef, isContractAddress)
 
   const handleConfirm = () => {
     if (validatedBookmark) {
@@ -51,63 +72,61 @@ export const ConfirmAddressSheet = forwardRef<
       })
       onConfirm?.(validatedBookmark)
       setSendToWallet(true)
-      handleClose()
+      onClose()
       navigateBack()
     }
   }
 
   return (
-    <BottomSheet ref={ref}>
-      <SendToWalletSheetContainer>
-        <IconContainer>
-          <Wallet sx={{ fontSize: 40 }} />
-        </IconContainer>
-        <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
-        <SheetAddressContainer>
-          {validatedBookmark?.name ? (
-            <Typography
-              sx={{
-                fontWeight: 600,
-                mb: 0.5,
-              }}
-            >
-              {validatedBookmark?.name}
+    <SendToWalletSheetContainer ref={containerRef}>
+      <IconContainer>
+        <Wallet sx={{ fontSize: 40 }} />
+      </IconContainer>
+      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
+      <SheetAddressContainer>
+        {validatedBookmark?.name ? (
+          <Typography
+            sx={{
+              fontWeight: 600,
+              mb: 0.5,
+            }}
+          >
+            {validatedBookmark?.name}
+          </Typography>
+        ) : null}
+        <Typography>{validatedBookmark?.address}</Typography>
+      </SheetAddressContainer>
+      <AlertMessage
+        title={
+          <Box sx={{ display: 'grid', gap: 1 }}>
+            <Typography variant="body2" fontWeight={500}>
+              {t('info.message.fundsToExchange')}
             </Typography>
-          ) : null}
-          <Typography>{validatedBookmark?.address}</Typography>
-        </SheetAddressContainer>
+          </Box>
+        }
+        icon={<Info />}
+        multiline
+      />
+      {isContractAddress ? (
         <AlertMessage
           title={
-            <Box sx={{ display: 'grid', gap: 1 }}>
-              <Typography variant="body2" fontWeight={500}>
-                {t('info.message.fundsToExchange')}
-              </Typography>
-            </Box>
+            <Typography variant="body2" fontWeight={500}>
+              {t('info.message.smartContractAccount')}
+            </Typography>
           }
-          icon={<Info />}
+          icon={<Warning />}
+          severity="warning"
           multiline
         />
-        {isContractAddress ? (
-          <AlertMessage
-            title={
-              <Typography variant="body2" fontWeight={500}>
-                {t('info.message.smartContractAccount')}
-              </Typography>
-            }
-            icon={<Warning />}
-            severity="warning"
-            multiline
-          />
-        ) : null}
-        <SendToWalletButtonRow>
-          <Button variant="text" onClick={handleClose} fullWidth>
-            {t('button.cancel')}
-          </Button>
-          <Button variant="contained" onClick={handleConfirm} fullWidth>
-            {t('button.confirm')}
-          </Button>
-        </SendToWalletButtonRow>
-      </SendToWalletSheetContainer>
-    </BottomSheet>
+      ) : null}
+      <SendToWalletButtonRow>
+        <Button variant="text" onClick={onClose} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleConfirm} fullWidth>
+          {t('button.confirm')}
+        </Button>
+      </SendToWalletButtonRow>
+    </SendToWalletSheetContainer>
   )
-})
+}