fix: add id prefix to all ids in case of multiple instances of the wi…

…dget in a page
lifinance · Jan 24, 2023 · 684f6d8 · 684f6d8
1 parent 520c76b
commit 684f6d8
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 31 deletions.
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 import { useWidgetConfig } from '../providers';
 import type { WidgetVariant } from '../types';
-import { ElementId } from '../utils';
+import { createElementId, ElementId } from '../utils';
 
 export const maxHeight = 680;
 
@@ -54,11 +54,11 @@ export const FlexContainer = styled(Container)({
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { containerStyle, variant } = useWidgetConfig();
+  const { containerStyle, variant, elementId } = useWidgetConfig();
   return (
     <RelativeContainer sx={containerStyle} variant={variant}>
       <CssBaselineContainer
-        id={ElementId.ScrollableContainer}
+        id={createElementId(ElementId.ScrollableContainer, elementId)}
         variant={variant}
         enableColorScheme
         // ref={ref}

diff --git a/packages/widget/src/components/BottomSheet/BottomSheet.tsx b/packages/widget/src/components/BottomSheet/BottomSheet.tsx
@@ -6,12 +6,13 @@ import {
   useRef,
   useState,
 } from 'react';
-import { getScrollableContainer } from '../../hooks';
+import { useGetScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
 import type { BottomSheetBase, BottomSheetProps } from './types';
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
   ({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = useGetScrollableContainer();
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
 
@@ -36,7 +37,7 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
 
     return (
       <Drawer
-        container={getScrollableContainer}
+        container={getContainer}
         ref={elementRef}
         anchor="bottom"
         open={drawerOpen}

diff --git a/packages/widget/src/components/Dialog.tsx b/packages/widget/src/components/Dialog.tsx
@@ -1,7 +1,7 @@
 import type { DialogProps, Theme } from '@mui/material';
 import { Dialog as MuiDialog } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { getScrollableContainer } from '../hooks';
+import { useGetScrollableContainer } from '../hooks';
 
 export const modalProps = {
   sx: {
@@ -32,9 +32,10 @@ export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
   open,
   onClose,
 }) => {
+  const getContainer = useGetScrollableContainer();
   return (
     <MuiDialog
-      container={getScrollableContainer}
+      container={getContainer}
       open={open}
       onClose={onClose}
       sx={modalProps.sx}

diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx
@@ -1,16 +1,18 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useDefaultElementId } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { ElementId, stickyHeaderRoutes } from '../../utils';
+import { createElementId, ElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
 
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
+  const elementId = useDefaultElementId();
   return (
     <Container
-      id={ElementId.Header}
+      id={createElementId(ElementId.Header, elementId)}
       sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
     >
       {children}

diff --git a/packages/widget/src/hooks/index.ts b/packages/widget/src/hooks/index.ts
@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts
@@ -1,13 +1,16 @@
 /* eslint-disable consistent-return */
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils';
+import { createElementId, ElementId } from '../utils';
+import { useDefaultElementId } from './useDefaultElementId';
 import { getScrollableContainer } from './useScrollableContainer';
 
-const getContentHeight = () => {
-  const headerElement = document.getElementById(ElementId.Header);
+const getContentHeight = (elementId: string) => {
+  const headerElement = document.getElementById(
+    createElementId(ElementId.Header, elementId),
+  );
   const containerElement = document.getElementById(
-    ElementId.ScrollableContainer,
+    createElementId(ElementId.ScrollableContainer, elementId),
   );
   if (!containerElement || !headerElement) {
     console.warn(
@@ -21,10 +24,13 @@ const getContentHeight = () => {
 };
 
 export const useContentHeight = () => {
-  const [contentHeight, setContentHeight] = useState<number>(getContentHeight);
+  const elementId = useDefaultElementId();
+  const [contentHeight, setContentHeight] = useState<number>(() =>
+    getContentHeight(elementId),
+  );
   useLayoutEffect(() => {
     if (!contentHeight) {
-      setContentHeight(getContentHeight());
+      setContentHeight(getContentHeight(elementId));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -34,8 +40,9 @@ export const useContentHeight = () => {
 export const useSetContentHeight = (
   ref: MutableRefObject<HTMLElement | undefined>,
 ) => {
+  const elementId = useDefaultElementId();
   useLayoutEffect(() => {
-    const scrollableContainer = getScrollableContainer();
+    const scrollableContainer = getScrollableContainer(elementId);
     if (
       !scrollableContainer ||
       !ref.current ||
@@ -47,5 +54,5 @@ export const useSetContentHeight = (
     return () => {
       scrollableContainer.style.removeProperty('height');
     };
-  }, [ref]);
+  }, [elementId, ref]);
 };
diff --git a/packages/widget/src/hooks/useDefaultElementId.ts b/packages/widget/src/hooks/useDefaultElementId.ts
@@ -0,0 +1,6 @@
+import { useWidgetConfig } from '../providers';
+
+export const useDefaultElementId = () => {
+  const { elementId } = useWidgetConfig();
+  return elementId;
+};
diff --git a/packages/widget/src/hooks/useScrollableContainer.ts b/packages/widget/src/hooks/useScrollableContainer.ts
@@ -1,26 +1,40 @@
-import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils';
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { createElementId, ElementId } from '../utils';
+import { useDefaultElementId } from './useDefaultElementId';
 
-export const getScrollableContainer = () =>
-  document.getElementById(ElementId.ScrollableContainer);
+export const getScrollableContainer = (elementId: string) =>
+  document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+
+export const useGetScrollableContainer = () => {
+  const elementId = useDefaultElementId();
+  const getContainer = useCallback(
+    () => getScrollableContainer(elementId),
+    [elementId],
+  );
+
+  return getContainer;
+};
 
-export const useScrollableContainer = () => {
-  const [containerElement, setContainerElement] = useState(
-    getScrollableContainer,
+export const useScrollableContainer = (elementId: string) => {
+  const [containerElement, setContainerElement] = useState(() =>
+    getScrollableContainer(elementId),
   );
 
   useLayoutEffect(() => {
     if (!containerElement) {
-      setContainerElement(getScrollableContainer());
+      setContainerElement(getScrollableContainer(elementId));
     }
-  }, [containerElement]);
+  }, [containerElement, elementId]);
 
   return containerElement;
 };
 
 export const useScrollableOverflowHidden = () => {
+  const elementId = useDefaultElementId();
   useLayoutEffect(() => {
-    const element = getScrollableContainer();
+    const element = getScrollableContainer(elementId);
     if (element) {
       element.style.overflowY = 'hidden';
     }
@@ -29,5 +43,5 @@ export const useScrollableOverflowHidden = () => {
         element.style.overflowY = 'auto';
       }
     };
-  }, []);
+  }, [elementId]);
 };
diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx
@@ -1,12 +1,13 @@
 import type { ChainKey } from '@lifi/sdk';
 import { getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useEffect, useMemo } from 'react';
+import { createContext, useContext, useEffect, useId, useMemo } from 'react';
 import { setDefaultSettings, useSettingsStoreContext } from '../../stores';
 import { formatAmount } from '../../utils';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
 
 const initialContext: WidgetContextProps = {
   disabledChains: [],
+  elementId: '',
 };
 
 const WidgetContext = createContext<WidgetContextProps>(initialContext);
@@ -28,6 +29,7 @@ export const WidgetProvider: React.FC<
   } = {},
 }) => {
   const settingsStoreContext = useSettingsStoreContext();
+  const elementId = useId();
   const value = useMemo((): WidgetContextProps => {
     try {
       const searchParams = Object.fromEntries(
@@ -76,12 +78,13 @@ export const WidgetProvider: React.FC<
           !isNaN(parseFloat(searchParams.fromAmount))
             ? formatAmount(searchParams.fromAmount)
             : fromAmount,
+        elementId,
       } as WidgetContextProps;
     } catch (e) {
       console.warn(e);
-      return config;
+      return { ...config, elementId };
     }
-  }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
+  }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
 
   useEffect(() => {
     setDefaultSettings(settingsStoreContext, value);

diff --git a/packages/widget/src/providers/WidgetProvider/types.ts b/packages/widget/src/providers/WidgetProvider/types.ts
@@ -3,6 +3,7 @@ import type { WidgetConfig } from '../../types';
 export type WidgetContextProps = WidgetConfig & {
   fromChain?: number;
   toChain?: number;
+  elementId: string;
 };
 
 export interface WidgetProviderProps {

diff --git a/packages/widget/src/utils/elements.ts b/packages/widget/src/utils/elements.ts
@@ -2,3 +2,6 @@ export enum ElementId {
   ScrollableContainer = 'widget-scrollable-container',
   Header = 'widget-header',
 }
+
+export const createElementId = (ElementId: ElementId, elementId: string) =>
+  `${ElementId}-${elementId}`;