TW-1360: EVM Design. Home page. Custom App Scroll

src/app/atoms/SimpleInfiniteScroll.tsx

@@ -2,6 +2,8 @@ import React, { memo, PropsWithChildren, useCallback, useState } from 'react';
 
 import InfiniteScroll from 'react-infinite-scroll-component';
 
+import { APP_CONTENT_PAPER_DOM_ID, SCROLL_DOCUMENT } from 'app/layouts/containers';
+
 interface Props {
   loadNext: EmptyFn;
 }
@@ -29,6 +31,7 @@ export const SimpleInfiniteScroll = memo<PropsWithChildren<Props>>(({ loadNext,
       // `InfiniteScroll`'s loader conditions r not suited here
       loader={null}
       scrollThreshold="600px"
+      scrollableTarget={SCROLL_DOCUMENT ? undefined : APP_CONTENT_PAPER_DOM_ID}
     >
       {children}
     </InfiniteScroll>

src/app/layouts/PageLayout/ScrollRestorer.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useLayoutEffect, useRef } from 'react';
+
+import * as Woozie from 'lib/woozie';
+
+interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+let SCROLL_RESTORATION = new Map<string, number>();
+const MEMOIZED_SCROLLS_LIMIT = 10;
+
+export const ScrollRestorer: FC<PropsWithChildren<Props>> = props => {
+  const { trigger, href } = Woozie.useLocation();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    // Only 'popstate' to location restores scroll position
+    // Other navigation ways discard previous memoized position
+    if (trigger !== 'popstate') return void SCROLL_RESTORATION.delete(href);
+
+    if (SCROLL_RESTORATION.size > MEMOIZED_SCROLLS_LIMIT) {
+      const slicedArray = Array.from(SCROLL_RESTORATION.entries()).slice(
+        SCROLL_RESTORATION.size - MEMOIZED_SCROLLS_LIMIT
+      );
+      SCROLL_RESTORATION = new Map(slicedArray);
+    }
+
+    if (!ref.current) return;
+
+    const scrollTop = SCROLL_RESTORATION.get(href);
+    if (scrollTop == null) return;
+    ref.current.scrollTop = scrollTop;
+  }, [trigger, href]);
+
+  return <div ref={ref} onScroll={onScroll} {...props} />;
+};
+
+function onScroll(event: React.UIEvent<HTMLDivElement>) {
+  SCROLL_RESTORATION.set(window.location.href, event.currentTarget.scrollTop);
+}

src/app/layouts/PageLayout/custom-app-scroll.css

@@ -0,0 +1,7 @@
+body, #root, #app-content-wrap {
+  height: 100%;
+}
+
+#app-content-wrap {
+  display: flex;
+}

src/app/layouts/PageLayout/index.tsx

@@ -10,13 +10,19 @@ import { useAppEnv } from 'app/env';
 import { AdvertisingOverlay } from 'app/templates/advertising/advertising-overlay/advertising-overlay';
 import { useTempleClient } from 'lib/temple/front';
 
-import { LAYOUT_CONTAINER_CLASSNAME } from '../containers';
+import {
+  SCROLL_DOCUMENT,
+  APP_CONTENT_PAPER_DOM_ID,
+  APP_CONTENT_WRAP_DOM_ID,
+  LAYOUT_CONTAINER_CLASSNAME
+} from '../containers';
 
 import { ChangelogOverlay } from './ChangelogOverlay/ChangelogOverlay';
 import ConfirmationOverlay from './ConfirmationOverlay';
 import { DefaultHeader, DefaultHeaderProps } from './DefaultHeader';
 import { NewsletterOverlay } from './NewsletterOverlay/NewsletterOverlay';
 import { OnRampOverlay } from './OnRampOverlay/OnRampOverlay';
+import { ScrollRestorer } from './ScrollRestorer';
 import { ShortcutAccountSwitchOverlay } from './ShortcutAccountSwitchOverlay';
 
 export interface PageLayoutProps extends DefaultHeaderProps {
@@ -38,7 +44,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
     <>
       <DocBg bgClassName="bg-secondary-low" />
 
-      <div className={clsx(fullPage && 'pt-9 pb-8')}>
+      <div id={APP_CONTENT_WRAP_DOM_ID} className={clsx(fullPage && 'pt-9 pb-8')}>
         <ContentPaper>
           {Header ? <Header /> : <DefaultHeader {...headerProps} />}
 
@@ -64,21 +70,25 @@ const ContentPaper: FC<PropsWithChildren> = ({ children }) => {
   const appEnv = useAppEnv();
 
   return (
-    <div
+    <ContentPaperNode
+      id={APP_CONTENT_PAPER_DOM_ID}
       className={clsx(
         LAYOUT_CONTAINER_CLASSNAME,
         'relative flex flex-col bg-white',
+        !SCROLL_DOCUMENT && 'overflow-y-auto',
         appEnv.fullPage && 'rounded-md shadow-bottom'
       )}
       style={appEnv.fullPage ? { minHeight: '20rem' } : undefined}
     >
       {children}
 
       <ContentFader />
-    </div>
+    </ContentPaperNode>
   );
 };
 
+const ContentPaperNode = SCROLL_DOCUMENT ? 'div' : ScrollRestorer;
+
 export const SpinnerSection: FC = () => (
   <div className="flex justify-center mt-24">
     <Spinner className="w-20" />

src/app/layouts/containers.tsx

@@ -5,6 +5,13 @@ import clsx from 'clsx';
 import { useIntersectionObserver } from 'lib/ui/use-intersection-observer';
 import { combineRefs } from 'lib/ui/utils';
 
+export const SCROLL_DOCUMENT = process.env.SCROLL_DOCUMENT === 'true';
+// (!) Condition mustn't be `if(!SCROLL_DOCUMENT)` - won't work for WebPack
+if (process.env.SCROLL_DOCUMENT !== 'true') require('./PageLayout/custom-app-scroll.css');
+
+export const APP_CONTENT_WRAP_DOM_ID = 'app-content-wrap';
+export const APP_CONTENT_PAPER_DOM_ID = 'app-content-paper';
+
 export const LAYOUT_CONTAINER_CLASSNAME = 'max-w-full w-96 mx-auto';
 
 interface ContentContainerProps extends PropsWithChildren {

src/lib/woozie/location.ts

@@ -15,7 +15,7 @@ interface LocationState {
   // Misc props
   host?: string;
   hostname?: string;
-  href?: string;
+  href: string;
   origin?: string;
   port?: string;
   protocol?: string;

src/main.css

@@ -9,7 +9,6 @@ html {
 }
 
 body {
-  /* min-height: calc(100vh + 1px); */
   min-height: 100%;
 }
 

tailwind.config.js

@@ -168,12 +168,6 @@ module.exports = {
         63: '15.75rem'
       },
 
-      // height: theme => theme('spacing'),
-
-      // minHeight: theme => theme('height'),
-
-      // maxHeight: theme => theme('height'),
-
       width: theme => theme('spacing'),
 
       minWidth: theme => theme('width'),