Merge branch 'develop' into frontend-changes-trade-txns

CrocSwap · Sep 30, 2024 · 3e915dc · 3e915dc
2 parents 441b2c0 + cfd4e2e
commit 3e915dc
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 59 deletions.
diff --git a/src/components/Global/IconWithTooltip/IconWithTooltip.tsx b/src/components/Global/IconWithTooltip/IconWithTooltip.tsx
@@ -25,17 +25,20 @@ interface IconWithTooltipPropsIF {
 
 function IconWithTooltip(props: IconWithTooltipPropsIF) {
     const { children, title, placement, style, enterDelay } = props;
+
     return (
-        <DefaultTooltip
-            interactive
-            arrow
-            title={title}
-            enterDelay={enterDelay ? parseFloat(enterDelay) : 400}
-            leaveDelay={200}
-            placement={placement ? placement : 'bottom'}
-        >
-            <div style={style}>{children}</div>
-        </DefaultTooltip>
+        <>
+            <DefaultTooltip
+                interactive
+                arrow
+                title={title}
+                enterDelay={enterDelay ? parseFloat(enterDelay) : 400}
+                leaveDelay={200}
+                placement={placement ? placement : 'bottom'}
+            >
+                <div style={style}>{children}</div>
+            </DefaultTooltip>
+        </>
     );
 }
 

diff --git a/src/components/Global/TooltipComponent/TooltipComponent.module.css b/src/components/Global/TooltipComponent/TooltipComponent.module.css
@@ -10,3 +10,16 @@
     display: flex;
     justify-content: center;
 }
+
+.mobilePopupContainer{
+    background: var(--dark2);
+    position: absolute;
+    bottom: 0;
+    height:55%;
+    width: 100%;
+    font-size: var(--body-size);
+    line-height: var(--body-lh);
+    padding-right: 8px;
+
+
+}
diff --git a/src/components/Global/TooltipComponent/TooltipComponent.tsx b/src/components/Global/TooltipComponent/TooltipComponent.tsx
@@ -4,11 +4,14 @@ import {
     DefaultTooltip,
     TextOnlyTooltip,
 } from '../StyledTooltip/StyledTooltip';
-import { memo } from 'react';
+import { memo, useRef, useState } from 'react';
+import useMediaQuery from '../../../utils/hooks/useMediaQuery';
+import useOnClickOutside from '../../../utils/hooks/useOnClickOutside';
 
 interface TooltipComponentProps {
     title: string | JSX.Element;
     noBg?: boolean;
+    usePopups?: boolean;
 
     icon?: JSX.Element;
     placement?:
@@ -28,6 +31,19 @@ interface TooltipComponentProps {
 }
 
 function TooltipComponent(props: TooltipComponentProps) {
+    const [open, setOpen] = useState(false);
+    const isMobile = useMediaQuery('(max-width:600px)');
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const clickOutsideHandler = () => {
+        setOpen(false);
+    };
+
+    useOnClickOutside(containerRef, clickOutsideHandler);
+
+    const mobilePopup = (
+        <div className={styles.mobilePopupContainer}>{props.title}</div>
+    );
     if (props.noBg)
         return (
             <TextOnlyTooltip
@@ -48,22 +64,29 @@ function TooltipComponent(props: TooltipComponentProps) {
             </TextOnlyTooltip>
         );
     return (
-        <DefaultTooltip
-            title={props.title}
-            interactive
-            placement={props.placement ? props.placement : 'right'}
-            arrow
-            enterDelay={400}
-            leaveDelay={200}
-        >
-            <div className={styles.icon}>
-                {props.icon ? (
-                    props.icon
-                ) : (
-                    <AiOutlineQuestionCircle size={15} />
-                )}
-            </div>
-        </DefaultTooltip>
+        <>
+            {open && props.usePopups && isMobile && mobilePopup}
+            <DefaultTooltip
+                title={props.title}
+                interactive
+                placement={props.placement ? props.placement : 'right'}
+                arrow
+                enterDelay={400}
+                leaveDelay={200}
+                ref={containerRef}
+            >
+                <div className={styles.icon}>
+                    {props.icon ? (
+                        props.icon
+                    ) : (
+                        <AiOutlineQuestionCircle
+                            size={15}
+                            onClick={() => setOpen(!open)}
+                        />
+                    )}
+                </div>
+            </DefaultTooltip>
+        </>
     );
 }
 

diff --git a/src/components/Trade/TableInfo/DetailedBox.tsx b/src/components/Trade/TableInfo/DetailedBox.tsx
@@ -23,6 +23,7 @@ export function DetailedBox(props: DetailedBoxPropsIF) {
                         <TooltipComponent
                             title={tooltipText}
                             placement='bottom'
+                            usePopups
                         />
                     )}
                 </FlexContainer>

diff --git a/src/components/Trade/TableInfo/TableInfo.styles.ts b/src/components/Trade/TableInfo/TableInfo.styles.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components/macro';
-import backgroundImage from '../../../assets/images/backgrounds/tableInfoBg.png';
 
 // can be extracted to common
 
@@ -9,10 +8,11 @@ interface BoxContainerProps {
 }
 
 const MainSection = styled.section`
-    background: url(${backgroundImage}) no-repeat;
 
     height: 100%;
     padding: 8px;
+   
+   
 `;
 
 const BoxContainer = styled.div<BoxContainerProps>`
@@ -24,6 +24,9 @@ const BoxContainer = styled.div<BoxContainerProps>`
         `  backdrop-filter: blur(10px);
         border-radius: 0.25rem;`}
     height: 100%;
+
+    
+    
 `;
 
 const FeaturedBoxInnerContainer = styled.div<BoxContainerProps>`

diff --git a/src/components/Trade/TableInfo/TableInfo.tsx b/src/components/Trade/TableInfo/TableInfo.tsx
@@ -62,6 +62,7 @@ export default function TableInfo() {
                 className='custom_scroll_ambient'
                 fullWidth
                 fullHeight
+                style={{overflow: 'hidden'}}
             >
                 <GridContainer
                     numCols={smallScreen ? 1 : 2}
@@ -81,7 +82,7 @@ export default function TableInfo() {
                     </GridContainer>
 
                     <GridContainer gap={28} customRows='46px 46px auto'>
-                        <GridContainer numCols={4} gap={8}>
+                        <GridContainer numCols={smallScreen ? 2 : 4} gap={8}>
                             {/* first 4 row items go here */}
                             <DetailedBox
                                 label='Total Vol.'

diff --git a/src/contexts/AppStateContext.tsx b/src/contexts/AppStateContext.tsx
@@ -51,7 +51,7 @@ export interface AppStateContextIF {
     showTopPtsBanner: boolean;
     dismissTopBannerPopup: () => void;
     isUserIdle: boolean;
-    isUserIdle10min: boolean;
+    isUserIdle20min: boolean;
 }
 
 export const AppStateContext = createContext<AppStateContextIF>(
@@ -68,7 +68,7 @@ export const AppStateContextProvider = (props: {
     const [isChatEnabled, setIsChatEnabled] = useState(CHAT_ENABLED);
     const [isUserOnline, setIsUserOnline] = useState(navigator.onLine);
     const [isUserIdle, setIsUserIdle] = useState(false);
-    const [isUserIdle10min, setIsUserIdle10min] = useState(false);
+    const [isUserIdle20min, setIsUserIdle20min] = useState(false);
 
     window.ononline = () => setIsUserOnline(true);
     window.onoffline = () => setIsUserOnline(false);
@@ -158,7 +158,7 @@ export const AppStateContextProvider = (props: {
             },
             server: { isEnabled: isServerEnabled, isUserOnline: isUserOnline },
             isUserIdle,
-            isUserIdle10min,
+            isUserIdle20min,
             subscriptions: { isEnabled: areSubscriptionsEnabled },
             walletModal: {
                 isOpen: isGateWalletModalOpen,
@@ -198,18 +198,17 @@ export const AppStateContextProvider = (props: {
         ],
     );
 
-
     const onIdle = () => {
         setIsUserIdle(true);
     };
 
-    const onIdle10 = () => {
-        setIsUserIdle10min(true);
+    const onIdle20 = () => {
+        setIsUserIdle20min(true);
     };
 
     const onActive = () => {
         setIsUserIdle(false);
-        setIsUserIdle10min(false);
+        setIsUserIdle20min(false);
     };
 
     // Custom visibility change handler to trigger onActive when the tab becomes visible
@@ -265,9 +264,9 @@ export const AppStateContextProvider = (props: {
     });
 
     useIdleTimer({
-        onIdle: onIdle10,
+        onIdle: onIdle20,
         onActive,
-        timeout: 1000 * 60 * 10, // set user to idle after 10 minutes
+        timeout: 1000 * 60 * 20, // set user to idle after 20 minutes
         promptTimeout: 0,
         events: [
             'mousemove',

diff --git a/src/pages/Chart/ChartSettings/ChartSettings.tsx b/src/pages/Chart/ChartSettings/ChartSettings.tsx
@@ -702,7 +702,7 @@ export default function ChartSettings(props: ContextMenuIF) {
                                 ? 'var(--accent1)'
                                 : 'var(--text1)'
                         }
-                        width={'98px'}
+                        width={'auto'}
                         onClick={() =>
                             handleApplyDefaults(defaultChartSettings)
                         }

diff --git a/src/pages/Chart/ChartSettings/ChartSettingsCss.ts b/src/pages/Chart/ChartSettings/ChartSettingsCss.ts
@@ -175,6 +175,7 @@ const FooterButtons = styled.div<{
     gap: 10px;
     border-radius: ${({ isFuta }) => (isFuta ? '0px' : '50px')};
 
+    max-width: 110px;
     width: ${({ width }) => width};
     height: 27px;
 
@@ -201,12 +202,11 @@ const FooterButtons = styled.div<{
 `;
 
 const FooterContextText = styled.div`
-    font-family: Lexend Deca;
-    font-size: 12px;
-    font-weight: 300;
+    font-size: var(--body-size);
     line-height: 15px;
     letter-spacing: -0.02em;
     text-align: center;
+    text-wrap: nowrap;
 `;
 
 const Icon = styled.svg`

diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx
@@ -5520,15 +5520,39 @@ export default function Chart(props: propsIF) {
         renderSubchartCrCanvas();
     }, [crosshairActive]);
 
-    const setCrossHairDataFunc = (nearestTime: number, offsetY: number) => {
-        setCrosshairActive('chart');
+    const setCrossHairDataFunc = (
+        nearestTime: number,
+        offsetX: number,
+        offsetY: number,
+    ) => {
+        if (scaleData) {
+            const snapDiff =
+                scaleData?.xScale.invert(offsetX) % (period * 1000);
+
+            const snappedTime =
+                scaleData?.xScale.invert(offsetX) -
+                (snapDiff > period * 1000 - snapDiff
+                    ? -1 * (period * 1000 - snapDiff)
+                    : snapDiff);
+
+            const crTime =
+                snappedTime <= lastCandleData.time * 1000 &&
+                snappedTime >= firstCandleData.time * 1000 &&
+                nearestTime
+                    ? nearestTime * 1000
+                    : snappedTime;
+
+            setCrosshairActive('chart');
+
+            setCrosshairData([
+                {
+                    x: crTime,
+                    y: scaleData?.yScale.invert(offsetY),
+                },
+            ]);
 
-        setCrosshairData([
-            {
-                x: nearestTime,
-                y: scaleData?.yScale.invert(offsetY),
-            },
-        ]);
+            return crTime;
+        }
     };
 
     const mousemove = (event: MouseEvent<HTMLDivElement>) => {
@@ -5543,7 +5567,7 @@ export default function Chart(props: propsIF) {
                 const { isHoverCandleOrVolumeData, nearest } =
                     candleOrVolumeDataHoverStatus(offsetX, offsetY);
 
-                setCrossHairDataFunc(nearest?.time * 1000, offsetY);
+                    setCrossHairDataFunc(nearest?.time, offsetX, offsetY);
 
                 let isOrderHistorySelected = undefined;
                 if (

diff --git a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx
@@ -582,7 +582,7 @@ export default function DragCanvas(props: DragCanvasProps) {
                                 ? valueX > scaleData.xScale.invert(offsetX)
                                 : valueX < scaleData.xScale.invert(offsetX);
 
-                        setCrossHairDataFunc(valueX, offsetY);
+                        setCrossHairDataFunc(valueX,offsetX,offsetY);
 
                         if (
                             hoveredDrawnShape &&

diff --git a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DrawCanvas.tsx b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DrawCanvas.tsx
@@ -507,7 +507,7 @@ function DrawCanvas(props: DrawCanvasProps) {
                     offsetY,
                 );
 
-                setCrossHairDataFunc(valueX, offsetY);
+                setCrossHairDataFunc(valueX / 1000, offsetX, offsetY);
 
                 if (!isDrawing || activeDrawingType === 'Ray') return;
 

diff --git a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx
@@ -87,7 +87,7 @@ function ChartToolbar() {
 
     const [isHoveredUp, setIsHoveredUp] = useState(false);
     const [isHoveredDown, setIsHoveredDown] = useState(false);
-    const { isUserIdle10min } = useContext(AppStateContext);
+    const { isUserIdle20min } = useContext(AppStateContext);
 
     const [hoveredTool, setHoveredTool] = useState<string | undefined>(
         undefined,
@@ -320,7 +320,7 @@ function ChartToolbar() {
 
     return chartContainerOptions &&
         chartContainerOptions.top !== 0 &&
-        !isUserIdle10min ? (
+        !isUserIdle20min ? (
         <ToolbarContainer
             isActive={isToolbarOpen}
             isMobile={mobileView}

diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
@@ -93,7 +93,7 @@ function TradeCandleStickChart(props: propsIF) {
         quoteToken: { address: quoteTokenAddress },
     } = useContext(TradeTokenContext);
 
-    const { isUserIdle10min } = useContext(AppStateContext);
+    const { isUserIdle20min } = useContext(AppStateContext);
 
     const { liqMode } = props.chartItemStates;
 
@@ -1157,7 +1157,7 @@ function TradeCandleStickChart(props: propsIF) {
                         </div>
                     </>
                 )}
-                {isOpenChart && !isUserIdle10min && (
+                {isOpenChart && !isUserIdle20min && (
                     <>
                         <ChartTooltip
                             currentData={currentData}
@@ -1206,7 +1206,7 @@ function TradeCandleStickChart(props: propsIF) {
                 )}
 
                 {!(!isOpenChart || isCompletedFetchData) &&
-                    isUserIdle10min &&
+                    isUserIdle20min &&
                     skeletonChart}
             </div>
         </>