chore: update code

TrustlessComputer · Jan 17, 2024 · 754520d · 754520d
1 parent 35c66ec
commit 754520d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/src/components/ScrollWrapper/ScrollWrapper.module.scss b/src/components/ScrollWrapper/ScrollWrapper.module.scss
@@ -11,19 +11,41 @@
     overflow-x: hidden;
     max-width: 100vw;
     -ms-overflow-style: none;
-    scrollbar-width: none;
     scroll-behavior: smooth;
     -webkit-scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     transition: transform 0s linear;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    &::-moz-scrollbar {
-      display: none;
+    &__hideScrollBar {
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      &::-moz-scrollbar {
+        display: none;
+      }
     }
   }
 
+  .wrapperScroll::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
+    background-color: #F5F5F5 !important;
+  }
+  .wrapperScroll::-webkit-scrollbar {
+    width: 6px;
+    background-color: #F5F5F5;
+  }
+  .wrapperScroll::-webkit-scrollbar-thumb{
+    background-color: #fa8e70;
+    background-image: -webkit-linear-gradient(45deg,
+      rgba(255, 255, 255, .2) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, .2) 50%,
+      rgba(255, 255, 255, .2) 75%,
+      transparent 75%,
+      transparent)
+  }
+
   .loading {
     img {
       height: 44px;

diff --git a/src/components/ScrollWrapper/ScrollWrapper.tsx b/src/components/ScrollWrapper/ScrollWrapper.tsx
@@ -10,6 +10,7 @@ import React, {
 import PullToRefresh from 'react-simple-pull-to-refresh';
 import Loading from '../Loading';
 import s from './ScrollWrapper.module.scss';
+import cs from 'classnames';
 
 interface props {
   children: React.ReactNode;
@@ -20,6 +21,7 @@ interface props {
   onScroll?: (e: any) => void;
   className?: string;
   wrapClassName?: string;
+  hideScrollBar?: boolean
 }
 
 const ScrollWrapper = forwardRef((props: props, ref) => {
@@ -31,20 +33,23 @@ const ScrollWrapper = forwardRef((props: props, ref) => {
     onFetchNewData,
     onScroll,
     className = '',
-    wrapClassName = '', 
+    wrapClassName = '',
+    hideScrollBar = true
   } = props;
 
   // fetching data on scroll
   const feedContainerRef = useRef<HTMLDivElement | null>(null);
   const handleScroll = () => {
     if (feedContainerRef && feedContainerRef?.current) {
       const container = feedContainerRef.current;
-      const isScrolledToBottom =
-        container.scrollTop + container.clientHeight >=
-        container.scrollHeight - container.scrollHeight / 4;
+      if (container) {
+        const isScrolledToBottom =
+          container.scrollTop + container.clientHeight >=
+          container.scrollHeight - container.scrollHeight / 4;
 
-      if (isScrolledToBottom && !isFetching && !hasIncrementedPageRef.current) {
-        onFetch();
+        if (isScrolledToBottom && !isFetching && !hasIncrementedPageRef.current) {
+          onFetch();
+        }
       }
     }
   };
@@ -70,11 +75,11 @@ const ScrollWrapper = forwardRef((props: props, ref) => {
 
   useEffect(() => {
     if (feedContainerRef.current) {
-      feedContainerRef.current.addEventListener('scroll', handleScroll);
+      feedContainerRef.current!.addEventListener('scroll', handleScroll);
     }
     return () => {
       if (feedContainerRef.current) {
-        feedContainerRef.current.removeEventListener('scroll', handleScroll);
+        feedContainerRef.current!.removeEventListener('scroll', handleScroll);
       }
     };
   }, [isFetching]);
@@ -92,10 +97,19 @@ const ScrollWrapper = forwardRef((props: props, ref) => {
           <Loading className={s.loading} />
         </Flex>
       }
-      className={`${s.refreshWrapper} ${className}`}
+      className={cs(
+        s.refreshWrapper,
+        className,
+      )}
     >
       <div
-        className={`${s.wrapperScroll} ${wrapClassName}`}
+        className={cs(
+          s.wrapperScroll,
+          wrapClassName,
+          {
+            [s.wrapperScroll__hideScrollBar]: hideScrollBar
+          }
+        )}
         ref={feedContainerRef}
         onScroll={(e) => onScroll?.(e)}
       >

diff --git a/src/modules/Whitelist/leaderBoard/index.tsx b/src/modules/Whitelist/leaderBoard/index.tsx
@@ -40,7 +40,7 @@ const LeaderBoard = () => {
   const hasIncrementedPageRef = useRef(false);
   const refParams = useRef({
     page: 1,
-    limit: 1000,
+    limit: 50,
   });
   const refInitial = useRef(false);
 
@@ -563,7 +563,7 @@ const LeaderBoard = () => {
 
         </Box>
       </Box>*/}
-      <Box w="100%" bg="rgba(255, 255, 255, 0.30)" p="8px">
+      <Box w="100%" height="80dvh" bg="rgba(255, 255, 255, 0.30)" p="8px">
         <ScrollWrapper
           onFetch={() => {
             refParams.current = {
@@ -577,6 +577,7 @@ const LeaderBoard = () => {
           hasIncrementedPageRef={hasIncrementedPageRef}
           onFetchNewData={onRefresh}
           wrapClassName={styles.wrapScroll}
+          hideScrollBar={false}
         >
           <ListTable
             data={data}