Merge pull request #4141 from zcelbirPlabs/futa_chart_mobile_merge_de…

…vlop Futa chart mobile merge develop
CrocSwap · Sep 23, 2024 · eb7bc1a · eb7bc1a
2 parents 84e44e1 + c08a1e1
commit eb7bc1a
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 120 deletions.
diff --git a/src/pages/Chart/ChartTooltip/ChartTooltip.tsx b/src/pages/Chart/ChartTooltip/ChartTooltip.tsx
@@ -5,6 +5,7 @@ import { TradeDataContext } from '../../../contexts/TradeDataContext';
 import { formatDollarAmountAxis } from '../../../utils/numbers';
 import { ChartTooltipDiv, CurrentDataDiv } from './ChartTooltipStyles';
 import useDollarPrice from '../../platformAmbient/Chart/ChartUtils/getDollarPrice';
+// import { BrandContext } from '../../../contexts/BrandContext';
 
 interface propsIF {
     showTooltip: boolean;
@@ -13,7 +14,8 @@ interface propsIF {
 export default function ChartTooltip(props: propsIF) {
     const { showTooltip, currentData } = props;
 
-    const { chartSettings,isToolbarOpen } = useContext(ChartContext);
+    const { chartSettings, isToolbarOpen, isFullScreen } =
+        useContext(ChartContext);
 
     const candleTime = chartSettings.candleTime.global;
     const matchingCandleTime = candleTime.defaults.find(
@@ -29,7 +31,10 @@ export default function ChartTooltip(props: propsIF) {
     const getDollarPrice = useDollarPrice();
 
     const chartTooltip = (
-        <ChartTooltipDiv isToolbarOpen={isToolbarOpen}>
+        <ChartTooltipDiv
+            isToolbarOpen={isToolbarOpen}
+            isFullScreen={isFullScreen}
+        >
             {showTooltip && currentData ? (
                 <CurrentDataDiv>
                     <p>

diff --git a/src/pages/Chart/ChartTooltip/ChartTooltipStyles.ts b/src/pages/Chart/ChartTooltip/ChartTooltipStyles.ts
@@ -1,14 +1,17 @@
 import styled from 'styled-components';
 
 const ChartTooltipDiv = styled.div<{
-    isToolbarOpen:boolean;
+    isToolbarOpen: boolean;
+    isFullScreen: boolean;
 }>`
     justify-content: space-between;
     text-wrap: wrap;
     align-items: center;
     position: fixed;
+
     margin-top: -24px;
     margin-left: 10px;
+
     p {
         margin-left: 0px;
         text-overflow: ellipsis;
@@ -19,7 +22,8 @@ const ChartTooltipDiv = styled.div<{
     @media screen and (min-width: 768px) {
         position: absolute;
         margin-top: 0px;
-        margin-left: ${({ isToolbarOpen }) => isToolbarOpen ? '38px': '12px'};
+        margin-left: ${({ isToolbarOpen }) =>
+            isToolbarOpen ? '38px' : '12px'};
 
         p {
             margin-left: 2px;

diff --git a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx
@@ -58,6 +58,7 @@ function ChartToolbar() {
     const smallScreen = useMediaQuery('(max-width: 500px)');
 
     const { platformName } = useContext(BrandContext);
+    const isFuta = ['futa'].includes(platformName);
 
     const {
         toolbarRef,
@@ -79,6 +80,7 @@ function ChartToolbar() {
         setSelectedDrawnShape,
         chartContainerOptions,
         setIsMagnetActiveLocal,
+        isFullScreen,
     } = useContext(ChartContext);
     const scrollContainerRef = useRef<HTMLDivElement>(null);
 
@@ -329,9 +331,15 @@ function ChartToolbar() {
             id='toolbar_container'
             ref={toolbarRef}
             backgroundColor={
-                mobileView || ['futa'].includes(platformName)
-                    ? 'var(--dark1)'
-                    : 'var(--dark2)'
+                isFuta
+                    ? mobileView || smallScreen
+                        ? 'transparent'
+                        : isFullScreen
+                          ? 'var(--dark2)'
+                          : 'var(--dark1)'
+                    : mobileView
+                      ? 'var(--dark1)'
+                      : 'var(--dark2)'
             }
             onMouseLeave={handleMouseLeave}
             onMouseMove={handleMouseMove}
@@ -554,7 +562,7 @@ function ChartToolbar() {
                 >
                     <ArrowRight
                         isActive={isToolbarOpen}
-                        isFuta={['futa'].includes(platformName)}
+                        isFuta={isFuta}
                     ></ArrowRight>
                 </DividerButton>
             </DividerContainer>

diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx
@@ -54,7 +54,9 @@ import TradeCharts from './TradeCharts/TradeCharts';
 const TRADE_CHART_MIN_HEIGHT = 175;
 
 // React functional component
-function Trade() {
+function Trade(props: { futaActiveTab?: string | undefined }) {
+    const { futaActiveTab } = props;
+
     const {
         chainData: { chainId },
         provider,
@@ -228,7 +230,7 @@ function Trade() {
     useEffect(() => {
         const calculateHeight = () => {
             const totalHeight = window.innerHeight;
-            const heightToSubtract = 56 + 56; // Subtract 56px from top and 56px from bottom
+            const heightToSubtract = isFuta ? 56 + 56 + 55 : 56 + 56; // Subtract 56px from top and 56px from bottom
             setAvailableHeight(totalHeight - heightToSubtract);
         };
 
@@ -239,7 +241,9 @@ function Trade() {
     }, []);
 
     const contentHeight = availableHeight - 75;
-    const activeTabData = tabs.find((tab) => tab.id === activeTab)?.data;
+    const activeTabData = tabs.find(
+        (tab) => tab.id === (isFuta ? futaActiveTab : activeTab),
+    )?.data;
 
     const currencyCharacter = isDenomBase
         ? // denom in a, return token b character
@@ -277,7 +281,10 @@ function Trade() {
             style={{ height: `${availableHeight}px` }}
         >
             {!isFuta && mobileTabs}
-            <div className={styles.mobile_header}>
+            <div
+                className={styles.mobile_header}
+                style={{ padding: isFuta ? '8px' : '' }}
+            >
                 <div
                     className={styles.mobile_token_icons}
                     onClick={toggleDidUserFlipDenom}
@@ -298,8 +305,11 @@ function Trade() {
                         alt={isDenomBase ? quoteToken.symbol : baseToken.symbol}
                         size={'s'}
                     />
-                    {isDenomBase ? baseToken.symbol : quoteToken.symbol} /
-                    {isDenomBase ? quoteToken.symbol : baseToken.symbol}
+                    <div>
+                        {isDenomBase ? baseToken.symbol : quoteToken.symbol}
+                        {'/'}
+                        {isDenomBase ? quoteToken.symbol : baseToken.symbol}
+                    </div>
                 </div>
                 <div
                     className={styles.conv_rate}
@@ -318,7 +328,9 @@ function Trade() {
                         {poolPriceChangeString}
                     </p>
                 </div>
-                {activeTab === 'Chart' && (
+                {(isFuta
+                    ? futaActiveTab === 'Chart'
+                    : activeTab === 'Chart') && (
                     <LuSettings
                         size={20}
                         onClick={openMobileSettingsModal}
@@ -332,16 +344,6 @@ function Trade() {
         </div>
     );
 
-
-    if (isFuta && smallScreen)
-        return (
-            <>
-                {!isChartHeightMinimum && <ChartToolbar />}
-                {isPoolInitialized && !isCandleDataNull && (
-                    <TradeCharts {...tradeChartsProps} />
-                )}
-            </>
-        );
     if (smallScreen) return mobileComponent;
 
     return (
@@ -366,14 +368,14 @@ function Trade() {
                         flexDirection='column'
                         fullHeight
                         overflow='hidden'
-
                     >
                         <ResizableContainer
                             showResizeable={
-                                !isCandleDataNull && !isChartFullScreen && !isFuta
+                                !isCandleDataNull &&
+                                !isChartFullScreen &&
+                                !isFuta
                             }
                             isFuta={isFuta}
-
                             enable={{
                                 bottom: !isChartFullScreen,
                                 top: false,

diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx
@@ -103,9 +103,7 @@ function TradeCharts(props: propsIF) {
     const { pathname } = useLocation();
     const smallScreen = useMediaQuery('(max-width: 768px)');
 
-    const isFuta = ['futa'].includes(platformName)
-
-
+    const isFuta = ['futa'].includes(platformName);
 
     const isMarketOrLimitModule =
         pathname.includes('market') || pathname.includes('limit');
@@ -266,7 +264,6 @@ function TradeCharts(props: propsIF) {
         </div>
     );
 
-
     const timeFrameContentDesktop = (
         <section className={styles.time_frame_container}>
             <div className={styles.mobile_settings_row}>
@@ -301,7 +298,9 @@ function TradeCharts(props: propsIF) {
             )}
             {!isFuta && (
                 <div className={styles.mobile_settings_row}>
-                    <p className={styles.mobile_settings_header}>Curve/Depth:</p>
+                    <p className={styles.mobile_settings_header}>
+                        Curve/Depth:
+                    </p>
                     <CurveDepth overlayMethods={chartSettings.poolOverlay} />
                 </div>
             )}
@@ -341,11 +340,12 @@ function TradeCharts(props: propsIF) {
                 fullHeight
                 fullWidth
                 style={{
-                    padding:
-                        isChartFullScreen || isFuta
-                            ? '1rem'
-                            : '0',
-                    background: isChartFullScreen ? isFuta ? 'var(--dark1)' : 'var(--dark2)' : '',
+                    padding: isChartFullScreen ? '1rem' : '0',
+                    background: isChartFullScreen
+                        ? isFuta
+                            ? 'var(--dark1)'
+                            : 'var(--dark2)'
+                        : '',
                 }}
                 ref={chartCanvasRef}
             >

diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.module.css b/src/pages/platformFuta/SwapFuta/SwapFuta.module.css
@@ -1,11 +1,10 @@
 .mainSection {
     display: grid;
     gap: 8px;
-    grid-template-columns: auto 4px  390px;
+    grid-template-columns: auto 4px 390px;
     padding: 0 8px;
     height: 100%;
     height: calc(100dvh - 75px);
-
 }
 
 .mobileMainSection {
@@ -18,7 +17,7 @@
     /* height: calc(100dvh - 75px);  */
 }
 
-.chartSection{
+.chartSection {
     /* display: flex;
     justify-content: center;
     align-items: center; */
@@ -27,40 +26,40 @@
     height: calc(100dvh - 75px);
 
     background: var(--dark3);
-
 
-     background: linear-gradient(
+    background: linear-gradient(
         90deg,
         rgba(7, 7, 7, 0.1) 25%,
         rgba(52, 45, 45, 0.2) 50%,
         rgba(55, 53, 53, 0.1) 75%
     );
     background-size: 200% 100%;
-
 }
 
-.chartSection img{
+.chartSection img {
     max-width: 100%;
     max-height: 100%;
 }
 
-
-.mobile_container {
+.chart_mobile_container .mobile_container {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     gap: 1rem;
+}
 
+.mobile_container {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 1rem;
 }
+
 .mobile_tabs_container {
     padding: 0 1rem;
 
     display: grid;
-   
+
     align-items: center;
     gap: 8px;
 }
@@ -87,7 +86,7 @@
         gap: 4px;
     }
 
-    .chartSection{
+    .chartSection {
         height: 130px;
     }
 }
@@ -101,8 +100,8 @@
     }
 }
 
-.comments_wrapper{
+.comments_wrapper {
     /* position: absolute; */
     width: 100%;
     display: block;
-}
+}