feat(qw claim): removed explicit bottom-position from 'claim footer s…

…ticky'
lidofinance · Aug 13, 2024 · e97346f · e97346f
1 parent b6a7b6e
commit e97346f
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 20 deletions.
diff --git a/features/withdrawals/claim/form/claim-form-footer-sticky.tsx b/features/withdrawals/claim/form/claim-form-footer-sticky.tsx
@@ -22,7 +22,6 @@ const STICK_CHECKPOINT_OFFSET =
 
 type ScrollState = {
   isSticked: boolean;
-  footerShift: number;
 };
 
 type ScrollStateSetter = <
@@ -49,7 +48,6 @@ export const ClaimFormFooterSticky: FC<
   // frequent operations performant during scroll
   const { current: scrollState } = useRef<ScrollState>({
     isSticked: false,
-    footerShift: -1,
   });
 
   const setStateAndUpdate = useCallback<ScrollStateSetter>(
@@ -70,7 +68,6 @@ export const ClaimFormFooterSticky: FC<
     const { y: screenH, x: screenW } = getScreenSize();
     const rectRequests = elRequests.getBoundingClientRect();
     const rectFooter = elFooter.getBoundingClientRect();
-    const footerHeight = elFooter.clientHeight;
     const menuOffset = screenW < NAV_MOBILE_MAX_WIDTH ? NAV_MOBILE_HEIGHT : 0;
 
     // Calcs
@@ -87,16 +84,8 @@ export const ClaimFormFooterSticky: FC<
       if (!scrollState.isSticked) {
         setStateAndUpdate('isSticked', true);
       }
-
-      const currFooterShift =
-        footerHeight - Math.min(distanceFromElStart, footerHeight) - menuOffset;
-      if (currFooterShift !== scrollState.footerShift) {
-        scrollState.footerShift = currFooterShift;
-      }
     } else {
       if (scrollState.isSticked) {
-        scrollState.footerShift = -1;
-        elFooter.style.removeProperty('bottom');
         setStateAndUpdate('isSticked', false);
       }
     }
@@ -106,7 +95,6 @@ export const ClaimFormFooterSticky: FC<
 
   const positionInitializatorEffect = useCallback(() => {
     if (!isEnabled) return;
-    const elFooter = refFooter.current;
 
     // Event subscriptions
     window.addEventListener('resize', updatePosition, { passive: true });
@@ -115,8 +103,6 @@ export const ClaimFormFooterSticky: FC<
     return () => {
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', updatePosition);
-      scrollState.footerShift = -1;
-      if (elFooter) elFooter.style.removeProperty('bottom');
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEnabled]);
@@ -131,7 +117,6 @@ export const ClaimFormFooterSticky: FC<
     <>
       <ClaimFormFooterWrapper
         isSticked={isEnabled && scrollState.isSticked}
-        footerShift={Math.abs(scrollState.footerShift)}
         ref={refFooter}
       >
         <ClaimFormFooter>

diff --git a/features/withdrawals/claim/form/styles.ts b/features/withdrawals/claim/form/styles.ts
@@ -83,12 +83,9 @@ export const ClaimFooterBodyEnder = styled.div`
   }
 `;
 
-export const ClaimFormFooterWrapper = styled.div<{
-  isSticked: boolean;
-  footerShift: number;
-}>`
+export const ClaimFormFooterWrapper = styled.div<{ isSticked: boolean }>`
   position: ${({ isSticked }) => (isSticked ? 'sticky' : 'relative')};
-  bottom: ${({ footerShift }) => (footerShift ? `${footerShift}px` : '0px')};
+  bottom: ${({ isSticked }) => (isSticked ? `60px` : '0px')};
   ${({ isSticked }) =>
     isSticked &&
     css`