diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx index 2f2391dc4..cae3e4e68 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx @@ -258,7 +258,7 @@ export const LayoutControls = () => { {layoutsWithHeightControls.includes(selectedLayoutId) ? ( - + {(heightValue && heightValue < defaultMaxHeight) || !heightValue ? ( diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 12d2bd734..52d97d3bf 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -6,6 +6,14 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import type { WidgetVariant } from '../types/widget.js'; import { ElementId, createElementId } from '../utils/elements.js'; +// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can +// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height +// A Number of other components and hooks work with height values that are often set on or derived from these elements +// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use +// - useTokenListHeight +// - useSetContentHeight +// Also check any code that is using the methods from elements.ts utils file + export const AppExpandedContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'variant', })<{ variant?: WidgetVariant }>(({ theme, variant }) => ({ diff --git a/packages/widget/src/hooks/useScrollableContainer.ts b/packages/widget/src/hooks/useScrollableContainer.ts index ae7508732..1d386dce1 100644 --- a/packages/widget/src/hooks/useScrollableContainer.ts +++ b/packages/widget/src/hooks/useScrollableContainer.ts @@ -1,12 +1,7 @@ import { useCallback, useLayoutEffect, useState } from 'react'; -import { ElementId, createElementId } from '../utils/elements.js'; +import { getScrollableContainer } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; -export const getScrollableContainer = (elementId: string) => - document.getElementById( - createElementId(ElementId.ScrollableContainer, elementId), - ); - export const useGetScrollableContainer = () => { const elementId = useDefaultElementId(); const getContainer = useCallback( diff --git a/packages/widget/src/hooks/useSetContentHeight.ts b/packages/widget/src/hooks/useSetContentHeight.ts index 8cfd1db7c..73e96c3d7 100644 --- a/packages/widget/src/hooks/useSetContentHeight.ts +++ b/packages/widget/src/hooks/useSetContentHeight.ts @@ -1,24 +1,28 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect } from 'react'; +import { getRelativeContainer } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; -import { getScrollableContainer } from './useScrollableContainer.js'; + +// NOTE: this hook is implicitly tied to the widget height functionality in the +// AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts +// CSS changes in those components can have implications for the functionality in this hook export const useSetContentHeight = ( ref: MutableRefObject, ) => { const elementId = useDefaultElementId(); useLayoutEffect(() => { - const scrollableContainer = getScrollableContainer(elementId); + const relativeContainer = getRelativeContainer(elementId); if ( - !scrollableContainer || + !relativeContainer || !ref.current || - ref.current?.clientHeight <= scrollableContainer?.clientHeight + ref.current?.clientHeight <= relativeContainer?.clientHeight ) { return; } - scrollableContainer.style.height = `${ref.current.clientHeight}px`; + relativeContainer.style.minHeight = `${ref.current.clientHeight}px`; return () => { - scrollableContainer.style.removeProperty('height'); + relativeContainer.style.removeProperty('min-height'); }; }, [elementId, ref]); }; diff --git a/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts index 263dfe2a7..f9de0cbab 100644 --- a/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts +++ b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts @@ -2,7 +2,12 @@ import { useTheme } from '@mui/material'; import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'; -import { ElementId, createElementId } from '../../utils/elements.js'; +import { + ElementId, + getAppContainer, + getHeaderElement, + getScrollableContainer, +} from '../../utils/elements.js'; const debounce = (func: Function, timeout = 300) => { let timer: ReturnType; @@ -18,13 +23,9 @@ const getContentHeight = ( elementId: string, listParentRef: MutableRefObject, ) => { - const containerElement = document.getElementById( - createElementId(ElementId.ScrollableContainer, elementId), - ); + const containerElement = getScrollableContainer(elementId); - const headerElement = document.getElementById( - createElementId(ElementId.Header, elementId), - ); + const headerElement = getHeaderElement(elementId); const listParentElement = listParentRef?.current; @@ -63,6 +64,10 @@ interface UseContentHeightProps { export const minTokenListHeight = 360; export const minMobileTokenListHeight = 160; +// NOTE: this hook is implicitly tied to the widget height functionality in the +// AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts +// CSS changes in those components can have implications for the functionality in this hook + export const useTokenListHeight = ({ listParentRef, headerRef, @@ -81,9 +86,7 @@ export const useTokenListHeight = ({ // calling this on initial mount prevents the lists resizing appearing glitchy handleResize(); - const appContainer = document.getElementById( - createElementId(ElementId.AppExpandedContainer, elementId), - ); + const appContainer = getAppContainer(elementId); let resizeObserver: ResizeObserver; if (appContainer) { diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx index 023ce76ad..68b6041e6 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx @@ -301,7 +301,12 @@ export const StatusBottomSheetContent: React.FC< {secondaryMessage} ) : null} {VcComponent ? : null} - + + {hasEnumFlag(status, RouteExecutionStatus.Done) ? ( + + ) : null} - {hasEnumFlag(status, RouteExecutionStatus.Done) ? ( - - - - ) : null} ); }; diff --git a/packages/widget/src/utils/elements.ts b/packages/widget/src/utils/elements.ts index 1c1cbf093..e6f4d76f1 100644 --- a/packages/widget/src/utils/elements.ts +++ b/packages/widget/src/utils/elements.ts @@ -8,3 +8,24 @@ export enum ElementId { export const createElementId = (ElementId: ElementId, elementId: string) => elementId ? `${ElementId}-${elementId}` : ElementId; + +// NOTE: The getter functions here are often used with code that can be effected by css changes in the +// AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts + +export const getAppContainer = (elementId: string) => + document.getElementById( + createElementId(ElementId.AppExpandedContainer, elementId), + ); + +export const getRelativeContainer = (elementId: string) => + document.getElementById( + createElementId(ElementId.RelativeContainer, elementId), + ); + +export const getScrollableContainer = (elementId: string) => + document.getElementById( + createElementId(ElementId.ScrollableContainer, elementId), + ); + +export const getHeaderElement = (elementId: string) => + document.getElementById(createElementId(ElementId.Header, elementId));