From 304b6bb990b1ff0f3820d29f31777651d5c5d35d Mon Sep 17 00:00:00 2001 From: Jadessu Date: Mon, 16 Sep 2024 15:36:09 -0500 Subject: [PATCH 01/11] fix dissapearance of trade mobules on smaller screens --- .../Chat/MessagePanel/Room/Room.module.css | 2 +- .../NFTBannerAccount.module.css | 88 +++++++++++++++++++ .../NFTBannerAccount.tsx | 3 +- .../NFTBannerAccountCss.ts | 2 +- src/pages/platformAmbient/Trade/Trade.tsx | 4 +- src/styled/Components/Trade.ts | 18 ++-- 6 files changed, 107 insertions(+), 10 deletions(-) create mode 100644 src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css diff --git a/src/components/Chat/MessagePanel/Room/Room.module.css b/src/components/Chat/MessagePanel/Room/Room.module.css index b77852ba15..d019b8d339 100644 --- a/src/components/Chat/MessagePanel/Room/Room.module.css +++ b/src/components/Chat/MessagePanel/Room/Room.module.css @@ -86,7 +86,7 @@ background: var(--dark3); padding: 1px; border-radius: var(--border-radius); - z-index: 100; + z-index: 1; } .dropdown_btn { diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css new file mode 100644 index 0000000000..b4e0bdedbe --- /dev/null +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css @@ -0,0 +1,88 @@ +.NFTBannerAccountContainer { + width: 100%; + height: 100%; + display: grid; + + gap: 16px; + + outline: 1px solid red; + border-radius: 4px; +} +.NFTBannerHeader { + display: flex; + + height: 40px; + + margin: 0px 10px 5px 10px; + + align-items: center; + justify-content: space-between; +} + +.NFTHeaderSettings{ + display: flex; + + gap: 5px; + + flex-direction: column; +} + +.SelectedNftCotainer { + display: flex; + + gap: 10px; + + justify-content: center; + align-items: center; +} +.IconContainer { + display: flex; + flex-direction: column; + + justify-content: center; + align-items: center; + + gap: 2px; + + font-size: 13px; + line-height: var(--body-lh); + color: var(--text1); +} +.SelectedNFTImg { + border-radius: 50%; + width: 55px; + height: 55px; + cursor: pointer; + border: 2.25px solid transparent; +} + +.Selected { + border-color: #ff9800; +} + +.IsSelectThumbnail { + border-color: #7bede4; +} + +.SelectedNFTImg:hover { + border-color: #ff9800; +} + +@media only screen and (min-width: 768px) { + .NFTBannerAccountContainer { + display: grid; + box-shadow: 4px 4px 6px #0d1117; + position: fixed; + left: calc(50vw - 50px); + top: 0; + transform: translateX(-50%); + + border-color: var(--accent1); + background: #0d1117; + z-index: 9999999; + border-width: 0.5px; + border-style: solid; + width: 350px; + max-height: 570px; + } +} diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx index 9911407dcc..f8f66e0a9f 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx @@ -397,8 +397,9 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { setIsContractNameOptionTabActive(false); }} ref={NftComponentItemRef} + > -
+
{!isCandleDataNull && ( - )} + )} + )} @@ -451,6 +452,7 @@ function Trade() { overflow='hidden' > + )} diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts index e9fe2785a3..2da189cb3c 100644 --- a/src/styled/Components/Trade.ts +++ b/src/styled/Components/Trade.ts @@ -22,10 +22,18 @@ export const MainSection = styled.section<{ border-top: ${(props) => !props.isDropdown && '1px solid var(--dark2)'}; - @media (max-width: 1200px) { - display: flex; - flex-direction: column; + @media (max-width: 1200px) { + ${({ isFill }) => { + if (!isFill) { + return ` + display: grid; + grid-template-columns: minmax(0, 1fr) 350px; /* Prevents overflowing */ + margin: 0 auto; + + `; } + }} +} @media (max-width: 600px) { display: flex; @@ -38,8 +46,6 @@ export const MainSection = styled.section<{ } `; - - export const ResizableContainer = styled(Resizable)<{ showResizeable: boolean; }>` @@ -149,4 +155,4 @@ export const TradeDropdownButton = styled.button<{ activeText?: boolean }>` color: ${(props) => (props.activeText ? 'var(--text1)' : 'var(--text2)')}; font-size: ${(props) => props.activeText ? 'var(--header1-size)' : 'inherit'}; -`; \ No newline at end of file +`; From 42d8e1eef78b52775532b9a38c9ea041ff84de47 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Mon, 16 Sep 2024 16:00:09 -0500 Subject: [PATCH 02/11] turn nft settings into modal --- .../NFTBannerAccount.tsx | 2 + .../NFTBannerAccountCss.ts | 10 +++ .../PortfolioBannerAccount.tsx | 80 +++++++++++++++---- .../Portfolio/Portfolio.module.css | 73 +---------------- .../platformAmbient/Portfolio/Portfolio.tsx | 17 +--- 5 files changed, 77 insertions(+), 105 deletions(-) diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx index f8f66e0a9f..7b2ee9c192 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx @@ -752,6 +752,8 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { handleNftSelection(); setIsSaveActive(!isVerified ? 3 : 1); } + setShowNFTPage(false) + }} > {isSaveActive === 1 diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts index 7e069685aa..fb5a107ac1 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts @@ -28,6 +28,16 @@ const NFTBannerAccountContainer = styled.div<{ background: #0d1117; z-index: 9999999 ; + + @media (max-width: 768px) { + border: none; + position: static; + transform: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + } `; const NFTBannerHeader = styled.div` diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx index 6067852753..c5d6eeb813 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx @@ -1,5 +1,11 @@ // import noAvatarImage from '../../../../assets/images/icons/avatar.svg'; -import { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'; +import { + Dispatch, + SetStateAction, + useContext, + useEffect, + useState, +} from 'react'; import { FiCopy, FiExternalLink } from 'react-icons/fi'; import { MdOutlineCloudDownload } from 'react-icons/md'; import { trimString } from '../../../../ambient-utils/dataLayer'; @@ -8,13 +14,15 @@ import { CrocEnvContext } from '../../../../contexts/CrocEnvContext'; import { TokenBalanceContext } from '../../../../contexts/TokenBalanceContext'; import { UserDataContext } from '../../../../contexts/UserDataContext'; import { FlexContainer } from '../../../../styled/Common'; -import styles from './PortfolioBannerAccount.module.css' +import styles from './PortfolioBannerAccount.module.css'; import useCopyToClipboard from '../../../../utils/hooks/useCopyToClipboard'; import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; import { getAvatarForProfilePage } from '../../../Chat/ChatRenderUtils'; import useChatApi from '../../../Chat/Service/ChatApi'; import NFTBannerAccount from './NFTBannerAccount'; +import Modal from '../../../Global/Modal/Modal'; +import { useModal } from '../../../Global/Modal/useModal'; interface IPortfolioBannerAccountPropsIF { ensName: string; resolvedAddress: string; @@ -23,7 +31,7 @@ interface IPortfolioBannerAccountPropsIF { jazziconsToDisplay: JSX.Element | null; connectedAccountActive: boolean; showTabsAndNotExchange: boolean; - setShowTabsAndNotExchange: Dispatch> + setShowTabsAndNotExchange: Dispatch>; } export default function PortfolioBannerAccount( @@ -39,7 +47,7 @@ export default function PortfolioBannerAccount( ensNameAvailable, connectedAccountActive, showTabsAndNotExchange, - setShowTabsAndNotExchange + setShowTabsAndNotExchange, } = props; const { @@ -149,9 +157,36 @@ export default function PortfolioBannerAccount( setNftTestWalletAddress(() => nftTestWalletInput); setIsfetchNftTriggered(() => true); } + const [ + isNftSettingsModalOpen, + openNftSettingsModal, + closeNftSettingsModal, + ] = useModal(); + const showMobileVersion = useMediaQuery('(max-width: 768px)'); + + + const mobileBannerSettings = ( + !showNFTPage ? null : + { NFTData && ( + + )} + + ); return ( -
- -
+
{(resolvedAddress || userAddress) && getAvatarForProfilePage( resolvedAddress @@ -186,8 +225,7 @@ export default function PortfolioBannerAccount( resolvedAddress.length > 0 && !connectedAccountActive ? false - : - true, + : true, )}
@@ -233,13 +271,21 @@ export default function PortfolioBannerAccount( - {isSmallScreen && connectedAccountActive && } + {isSmallScreen && connectedAccountActive && ( + + )} - {showNFTPage && NFTData && ( + {showMobileVersion ? mobileBannerSettings : showNFTPage && NFTData && ( ); -} \ No newline at end of file +} diff --git a/src/pages/platformAmbient/Portfolio/Portfolio.module.css b/src/pages/platformAmbient/Portfolio/Portfolio.module.css index bf8ac04c5c..db96f05efc 100644 --- a/src/pages/platformAmbient/Portfolio/Portfolio.module.css +++ b/src/pages/platformAmbient/Portfolio/Portfolio.module.css @@ -8,26 +8,7 @@ gap: 16px; } -.mobile_container{ - display: flex; - flex-direction: column; - gap: 4px; - margin: 0 auto; - padding: 0 8px; - /* height: calc(100dvh - 112px); */ - /* overflow-y: hidden !important; */ - display: grid; - grid-template-rows: 100px 1fr ; - - gap: 8px; - height: 70dvh; - margin-bottom: 56px; -overflow: hidden !important; - - - -} .portfolio_tabs_container { @@ -40,62 +21,10 @@ overflow: hidden !important; - .mobile_data_toggle_container{ - background: var(--dark2); - display: flex; - justify-content: center; - align-items: center; - border-radius: 4px; - outline: 1px solid var(--dark3); - margin: 10px auto; - - - - } - - .mobile_button { - font-size: var(--body-size); - line-height: var(--body-lh); - padding: 4px 1.5rem; - cursor: pointer; - transition: all 0.3s ease-in-out; - border: none; - outline: none; - width: 50%; - } - .mobile_button:hover { - color: var(--text1); - } - - .mobile_button.active { - color: black; - background: var(--accent1); - } - - .mobile_button.inactive { - color: var(--text1); - background: transparent; - } - - .mobile_layout{ - width: 100vw; - - - display: grid; - grid-template-rows: 105px 1fr ; - gap: 4px; - overflow: hidden; - - - - -} @media (min-width: 400px) { -.mobile_layout{ - padding: 0 1rem; -} + } @media (min-width: 1200px) { .portfolio_tabs_container.fullLayoutContainer { diff --git a/src/pages/platformAmbient/Portfolio/Portfolio.tsx b/src/pages/platformAmbient/Portfolio/Portfolio.tsx index 2b3f424888..f8f55cc7f0 100644 --- a/src/pages/platformAmbient/Portfolio/Portfolio.tsx +++ b/src/pages/platformAmbient/Portfolio/Portfolio.tsx @@ -469,22 +469,7 @@ function Portfolio(props: PortfolioPropsIF) { } }, [specificTab]); - // end of tab control on account from page header - // const mobilePortfolio = ( - //
- // {useMediaQuery('(min-height: 300px)') && ( - // - // )} - //
- // { - // connectedAccountActive && - // mobileDataToggle} - // {contentToRenderOnMobile} - //
- //
- // ); - - // const yes = false + if (showActiveMobileComponent && !isLevelsPage) return mobilePortfolio; if (isLevelsPage) return ; From d796f44828330dae9cea7165464b3365d16fe213 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Mon, 16 Sep 2024 16:39:24 -0500 Subject: [PATCH 03/11] fix portfolio page on medium devices --- .../ExchangeBalance.module.css | 8 ++--- .../ExchangeBalance/ExchangeBalance.tsx | 9 +++-- .../PortfolioBanner.module.css | 1 + .../PortfolioBannerAccount.tsx | 9 ++--- .../Portfolio/Portfolio.module.css | 33 +++++++++++++++---- .../platformAmbient/Portfolio/Portfolio.tsx | 17 ++++++++-- 6 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css index 931cfa99ac..4787d60673 100644 --- a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css +++ b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css @@ -38,10 +38,11 @@ .portfolio_control_container { cursor: pointer; - display: none; + display: flex; position: absolute; right: 8px; top: 8px; + border-radius: var(--border-radius); } @@ -58,8 +59,5 @@ .portfolio_motion_container { max-width: 400px; } - .portfolio_control_container { - display: flex; - border-radius: var(--border-radius); - } + } \ No newline at end of file diff --git a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx index 531fed34c7..faa566ca0d 100644 --- a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx +++ b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx @@ -29,6 +29,7 @@ interface propsIF { setFullLayoutActive: Dispatch>; setTokenModalOpen?: Dispatch>; isModalView?: boolean; + setIsAutoLayout?: Dispatch> | undefined; } export default function ExchangeBalance(props: propsIF) { @@ -37,6 +38,7 @@ export default function ExchangeBalance(props: propsIF) { setFullLayoutActive, isModalView = false, setTokenModalOpen = () => null, + setIsAutoLayout } = props; const { mainnetProvider } = useContext(CrocEnvContext); @@ -239,11 +241,14 @@ export default function ExchangeBalance(props: propsIF) { icon: transferImage, }, ]; - + const toggleFullLayoutActive = () => { + setFullLayoutActive(!fullLayoutActive); + setIsAutoLayout && setIsAutoLayout(false); // Mark that the layout is now manually controlled + }; const exchangeControl = (
setFullLayoutActive(!fullLayoutActive)} + onClick={toggleFullLayoutActive} > nftTestWalletInput); setIsfetchNftTriggered(() => true); } - const [ - isNftSettingsModalOpen, - openNftSettingsModal, - closeNftSettingsModal, - ] = useModal(); + const showMobileVersion = useMediaQuery('(max-width: 768px)'); const mobileBannerSettings = ( - !showNFTPage ? null : + !showNFTPage ? null : setShowNFTPage(false)}> { NFTData && ( (false); + const [isAutoLayout, setIsAutoLayout] = useState(true); // Tracks if the layout is being set automatically + + const matchesMinWidth = useMediaQuery('(min-width: 768px)'); + const matchesMaxWidth = useMediaQuery('(max-width: 1280px)'); + + useEffect(() => { + // Only change `fullLayoutActive` if it's set automatically + if (isAutoLayout && matchesMinWidth && matchesMaxWidth) { + setFullLayoutActive(true); + } else if (isAutoLayout && (!matchesMinWidth || !matchesMaxWidth)) { + setFullLayoutActive(false); + } + }, [isAutoLayout, matchesMinWidth, matchesMaxWidth]); + const exchangeBalanceComponent = ( ); @@ -469,8 +484,6 @@ function Portfolio(props: PortfolioPropsIF) { } }, [specificTab]); - - if (showActiveMobileComponent && !isLevelsPage) return mobilePortfolio; if (isLevelsPage) return ; From a84380622a7c7e6083c705bf7c475760deb33c18 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Mon, 16 Sep 2024 17:46:37 -0500 Subject: [PATCH 04/11] refactor futa swap mobile to match figma mobile --- src/components/Futa/Footer/Footer.module.css | 2 +- src/components/Futa/Footer/Footer.tsx | 28 ++- .../NoChartData/NoChartData.module.css | 1 + src/pages/platformAmbient/Trade/Trade.tsx | 12 +- .../platformFuta/LimitFuta/LimitFuta.tsx | 8 +- .../platformFuta/SwapFuta/SwapFuta.module.css | 41 +++- src/pages/platformFuta/SwapFuta/SwapFuta.tsx | 179 +++++++++--------- 7 files changed, 158 insertions(+), 113 deletions(-) diff --git a/src/components/Futa/Footer/Footer.module.css b/src/components/Futa/Footer/Footer.module.css index 84a003863f..267dc191f7 100644 --- a/src/components/Futa/Footer/Footer.module.css +++ b/src/components/Futa/Footer/Footer.module.css @@ -7,7 +7,7 @@ bottom: 0; padding: 8px; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); color: var(--text2); font-family: var(--font-family) !important; } diff --git a/src/components/Futa/Footer/Footer.tsx b/src/components/Futa/Footer/Footer.tsx index 66f179566c..bb01e5595e 100644 --- a/src/components/Futa/Footer/Footer.tsx +++ b/src/components/Futa/Footer/Footer.tsx @@ -1,4 +1,4 @@ -import { MdOutlineExplore } from 'react-icons/md'; +import { MdOutlineExplore, MdOutlineSwapVerticalCircle } from 'react-icons/md'; import styles from './Footer.module.css'; import { RiAccountCircleLine } from 'react-icons/ri'; import { FiPlusCircle } from 'react-icons/fi'; @@ -6,6 +6,10 @@ import { Link } from 'react-router-dom'; import { motion } from 'framer-motion'; import useMediaQuery from '../../../utils/hooks/useMediaQuery'; import DesktopFooter from './DesktopFooter'; +import { useContext } from 'react'; +import { formSlugForPairParams } from '../../../App/functions/urlSlugs'; +import { chainNumToString } from '../../../ambient-utils/dataLayer'; +import { TradeDataContext } from '../../../contexts/TradeDataContext'; const containerVariants = { hidden: { opacity: 0 }, @@ -24,22 +28,34 @@ const itemVariants = { }; export default function Footer() { + const { tokenA, tokenB } = useContext(TradeDataContext); + + const paramsSlug = formSlugForPairParams({ + chain: chainNumToString(tokenA.chainId), + tokenA: tokenA.address, + tokenB: tokenB.address, + }); const footerItems = [ { label: 'Explore', link: '/auctions', icon: , }, - { - label: 'Account', - link: '/account', - icon: , - }, { label: 'Create', link: '/create', icon: , }, + { + label: 'Trade', + link: '/swap/' + paramsSlug, + icon: , + }, + { + label: 'Account', + link: '/account', + icon: , + }, ]; const desktopScreen = useMediaQuery('(min-width: 780px)'); diff --git a/src/components/NoChartData/NoChartData.module.css b/src/components/NoChartData/NoChartData.module.css index a63b1ccb6b..9ec8e9bbaa 100644 --- a/src/components/NoChartData/NoChartData.module.css +++ b/src/components/NoChartData/NoChartData.module.css @@ -25,6 +25,7 @@ flex-direction: column; width: 100%; height: 100%; + text-align: center; } .pool_not_init_inner { border-radius: var(--border-radius); diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx index 4a62cb2b8b..9110ddafeb 100644 --- a/src/pages/platformAmbient/Trade/Trade.tsx +++ b/src/pages/platformAmbient/Trade/Trade.tsx @@ -276,7 +276,7 @@ function Trade() { className={styles.mobile_container} style={{ height: `${availableHeight}px` }} > - {mobileTabs} + {!isFuta && mobileTabs}
- {activeTabData} + { !isFuta ? activeTabData : <> + {!isChartHeightMinimum && } + {isPoolInitialized && !isCandleDataNull && ( + + )} + } +
); @@ -445,7 +451,7 @@ function Trade() { )} - {!isChartFullScreen && ( + {!isChartFullScreen && !isFuta && ( -
- + {/*
+ */} + ); } diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.module.css b/src/pages/platformFuta/SwapFuta/SwapFuta.module.css index ddccafdcfb..067fa9492a 100644 --- a/src/pages/platformFuta/SwapFuta/SwapFuta.module.css +++ b/src/pages/platformFuta/SwapFuta/SwapFuta.module.css @@ -44,12 +44,41 @@ max-height: 100%; } -/* @media (max-width: 800px) { - .mainSection { - display: flex; - flex-direction: column; - } -} */ + +.mobile_container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 1rem; + + max-width: 600px; + margin: 0 auto; + padding: 0 1rem; +} +.mobile_tabs_container { + padding: 0 1rem; + + display: grid; + + align-items: center; + gap: 8px; +} +.mobile_tabs_container button { + width: 100%; + background: var(--dark3); + outline: none; + border: 1px solid transparent; + color: var(--text2); + padding: 2px 0; + border-radius: 25px; + font-size: 12px; +} + +.activeTab { + border: 1px solid var(--accent1); + color: var(--accent1); +} @media (max-width: 600px) { .mainSection { diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx index 93627fb242..a58e218fba 100644 --- a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx +++ b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx @@ -1,19 +1,13 @@ -import { useContext, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import Divider from '../../../components/Futa/Divider/FutaDivider'; import Separator from '../../../components/Futa/Separator/Separator'; import Comments from '../../../components/Futa/Comments/Comments'; -import { TradeTableContext } from '../../../contexts/TradeTableContext'; import Swap from '../../platformAmbient/Trade/Swap/Swap'; import Trade from '../../platformAmbient/Trade/Trade'; import styles from './SwapFuta.module.css'; import useMediaQuery from '../../../utils/hooks/useMediaQuery'; -import ContentContainer from '../../../components/Global/ContentContainer/ContentContainer'; -import { - TradeDropdown, - TradeDropdownButton, -} from '../../../styled/Components/Trade'; -import { BsCaretDownFill } from 'react-icons/bs'; + import { ChartContext } from '../../../contexts/ChartContext'; import { useSimulatedIsPoolInitialized } from '../../../App/hooks/useSimulatedIsPoolInitialized'; @@ -22,103 +16,100 @@ import { useSimulatedIsPoolInitialized } from '../../../App/hooks/useSimulatedIs function SwapFuta() { const tradeWrapperID = 'swapFutaTradeWrapper'; - const showActiveMobileComponent = useMediaQuery('(max-width: 1200px)'); - - const { activeMobileComponent, setActiveMobileComponent } = - useContext(TradeTableContext); + const showActiveMobileComponent = useMediaQuery('(max-width: 768px)'); - const [showMobileDropdown, setMobileDropdown] = useState(false); - const handleMobileDropdownClick = (component: string) => { - setActiveMobileComponent(component); - setMobileDropdown(false); - }; const { isCandleDataNull } = useContext(ChartContext); const isPoolInitialized = useSimulatedIsPoolInitialized(); - const mobileTradeDropdown = ( - - setMobileDropdown(!showMobileDropdown)} - activeText - > - {activeMobileComponent} - - - - - {showMobileDropdown && ( -
- {activeMobileComponent !== 'trade' && ( - handleMobileDropdownClick('trade')} - > - Trade - - )} - - {!isCandleDataNull && - isPoolInitialized && - activeMobileComponent !== 'chart' && ( - - handleMobileDropdownClick('chart') - } - > - Chart - - )} - {activeMobileComponent !== 'comments' && ( - - handleMobileDropdownClick('comments') - } - > - Comments - - )} -
- )} - + + const [activeTab, setActiveTab] = useState('Trade'); + + const tabs = [ + { + id: 'Trade', + label: 'Trade', + data: + }, + !isCandleDataNull && + isPoolInitialized ? { + id: 'Chart', + label: 'Chart', + data: ( + <> + + + ), + } : null, + { id: 'Comments', label: 'Comments', data: }, + + ]; + + + const mobileTabs = ( +
+ {tabs + .filter((tab) => tab !== null && tab !== undefined) + .map((tab) => ( + + ))} +
); + + const [availableHeight, setAvailableHeight] = useState(window.innerHeight); + + useEffect(() => { + const calculateHeight = () => { + const totalHeight = window.innerHeight; + const heightToSubtract = 56 + 56; // Subtract 56px from top and 56px from bottom + setAvailableHeight(totalHeight - heightToSubtract); + }; + + calculateHeight(); // Calculate initial height + window.addEventListener('resize', calculateHeight); + + return () => window.removeEventListener('resize', calculateHeight); + }, []); + + const contentHeight = availableHeight - 75; + const activeTabData = tabs.find((tab) => tab?.id === activeTab)?.data; + const mobileSwap = ( -
- {mobileTradeDropdown} +
+ {mobileTabs} + +
+ {activeTabData} +
- {activeMobileComponent === 'chart' && ( -
- - -
- )} - - {activeMobileComponent === 'trade' && ( - -
- - -
- - )} - - {activeMobileComponent === 'comments' && ( - - )} +
); From 7afd297e5f0e243461558eb8045936f742810ebc Mon Sep 17 00:00:00 2001 From: Jadessu Date: Tue, 17 Sep 2024 14:11:03 -0500 Subject: [PATCH 05/11] remove resizeable and fic reset buttons --- src/components/Futa/Footer/Footer.tsx | 5 ++- src/pages/platformAmbient/Trade/Trade.tsx | 28 ++++++++------- .../Trade/TradeCharts/TradeCharts.module.css | 8 ++--- .../Trade/TradeCharts/TradeCharts.tsx | 35 +++++-------------- src/pages/platformFuta/SwapFuta/SwapFuta.tsx | 22 +++++++++++- src/routes/PlatformFuta.tsx | 4 +-- 6 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/components/Futa/Footer/Footer.tsx b/src/components/Futa/Footer/Footer.tsx index bb01e5595e..2a4d13b9a4 100644 --- a/src/components/Futa/Footer/Footer.tsx +++ b/src/components/Futa/Footer/Footer.tsx @@ -30,6 +30,8 @@ const itemVariants = { export default function Footer() { const { tokenA, tokenB } = useContext(TradeDataContext); + + const paramsSlug = formSlugForPairParams({ chain: chainNumToString(tokenA.chainId), tokenA: tokenA.address, @@ -47,10 +49,11 @@ export default function Footer() { icon: , }, { - label: 'Trade', + label: 'Swap', link: '/swap/' + paramsSlug, icon: , }, + { label: 'Account', link: '/account', diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx index 9110ddafeb..c8b6013d94 100644 --- a/src/pages/platformAmbient/Trade/Trade.tsx +++ b/src/pages/platformAmbient/Trade/Trade.tsx @@ -276,7 +276,7 @@ function Trade() { className={styles.mobile_container} style={{ height: `${availableHeight}px` }} > - {!isFuta && mobileTabs} + {!isFuta && mobileTabs}
- { !isFuta ? activeTabData : <> - {!isChartHeightMinimum && } - {isPoolInitialized && !isCandleDataNull && ( - - )} - } - + {activeTabData}
); + + if (isFuta && smallScreen) + return ( + <> + {!isChartHeightMinimum && } + {isPoolInitialized && !isCandleDataNull && ( + + )} + + ); if (smallScreen) return mobileComponent; return ( @@ -365,7 +369,7 @@ function Trade() { > {!isCandleDataNull && ( - )} - + )} )} - {!isChartFullScreen && !isFuta && ( + {!isChartFullScreen && !isFuta && ( - )} diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css index 8f4922912f..f2730987d6 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css @@ -85,8 +85,8 @@ .mobile_settings_header { display: none; } - .active_selected_button:hover, - .non_active_selected_button:hover { + .active_selected_button:hover, .futa_active_selected_button:hover + .non_active_selected_button:hover, .futa_non_active_selected_button { /* background: var(--title-gradient); */ color: var(--text1); } @@ -100,12 +100,12 @@ } } -.active_selected_button { +.active_selected_button, .futa_active_selected_button { width: 100%; height: 100%; color: var(--text1); } -.non_active_selected_button { +.non_active_selected_button, .futa_non_active_selected_button { color: var(--text2); } diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx index 3b87baf741..340ac07fac 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx @@ -206,13 +206,7 @@ function TradeCharts(props: propsIF) { // END OF GRAPH SETTINGS CONTENT------------------------------------------------------ const resetAndRescaleDisplay = ( -
+
{showLatest && (
); + const timeFrameContentDesktop = (
diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx index a58e218fba..074f4144aa 100644 --- a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx +++ b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx @@ -10,6 +10,12 @@ import useMediaQuery from '../../../utils/hooks/useMediaQuery'; import { ChartContext } from '../../../contexts/ChartContext'; import { useSimulatedIsPoolInitialized } from '../../../App/hooks/useSimulatedIsPoolInitialized'; +import ContentContainer from '../../../components/Global/ContentContainer/ContentContainer'; +import { Outlet } from 'react-router-dom'; +import { useUrlParams } from '../../../utils/hooks/useUrlParams'; +import { TokenContext } from '../../../contexts/TokenContext'; +import { CrocEnvContext } from '../../../contexts/CrocEnvContext'; +import { TradeDataContext } from '../../../contexts/TradeDataContext'; // import logo from '../../../assets/futa/logos/homeLogo.svg'; @@ -18,11 +24,22 @@ function SwapFuta() { const showActiveMobileComponent = useMediaQuery('(max-width: 768px)'); + const { + limitTick, + + } = useContext(TradeDataContext); const { isCandleDataNull } = useContext(ChartContext); const isPoolInitialized = useSimulatedIsPoolInitialized(); + const { + chainData: { chainId }, + provider, + } = useContext(CrocEnvContext); + const { tokens } = useContext(TokenContext); + + const { urlParamMap, updateURL } = useUrlParams(tokens, chainId, provider); const [activeTab, setActiveTab] = useState('Trade'); @@ -31,6 +48,7 @@ function SwapFuta() { { id: 'Trade', label: 'Trade', + data: }, !isCandleDataNull && @@ -51,12 +69,14 @@ function SwapFuta() { ]; + + const mobileTabs = (
{tabs diff --git a/src/routes/PlatformFuta.tsx b/src/routes/PlatformFuta.tsx index 7a3b17c177..11e39ef8b3 100644 --- a/src/routes/PlatformFuta.tsx +++ b/src/routes/PlatformFuta.tsx @@ -44,10 +44,10 @@ const PlatformFutaRoutes: React.FC = () => { element={} /> - } - /> + /> */} } /> Date: Tue, 17 Sep 2024 14:16:19 -0500 Subject: [PATCH 06/11] clean up code --- .../TradeChartsHeader/TradeChartsHeader.tsx | 1 + src/pages/platformFuta/SwapFuta/SwapFuta.tsx | 21 ++----------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx index a2ac524549..ca46b23279 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx @@ -229,6 +229,7 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { useMediaQuery('(min-width: 2000px)') ? 'center' : 'flex-start' } padding={props.tradePage ? ' 8px' : '4px 4px 8px 4px'} + style={{background: 'var(--dark1)'}} > {tradeTableState === 'Expanded' || showNoChartData diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx index 074f4144aa..be4d6d9e67 100644 --- a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx +++ b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx @@ -10,12 +10,7 @@ import useMediaQuery from '../../../utils/hooks/useMediaQuery'; import { ChartContext } from '../../../contexts/ChartContext'; import { useSimulatedIsPoolInitialized } from '../../../App/hooks/useSimulatedIsPoolInitialized'; -import ContentContainer from '../../../components/Global/ContentContainer/ContentContainer'; -import { Outlet } from 'react-router-dom'; -import { useUrlParams } from '../../../utils/hooks/useUrlParams'; -import { TokenContext } from '../../../contexts/TokenContext'; -import { CrocEnvContext } from '../../../contexts/CrocEnvContext'; -import { TradeDataContext } from '../../../contexts/TradeDataContext'; + // import logo from '../../../assets/futa/logos/homeLogo.svg'; @@ -24,24 +19,12 @@ function SwapFuta() { const showActiveMobileComponent = useMediaQuery('(max-width: 768px)'); - const { - - limitTick, - - } = useContext(TradeDataContext); + const { isCandleDataNull } = useContext(ChartContext); const isPoolInitialized = useSimulatedIsPoolInitialized(); - const { - chainData: { chainId }, - provider, - } = useContext(CrocEnvContext); - const { tokens } = useContext(TokenContext); - - const { urlParamMap, updateURL } = useUrlParams(tokens, chainId, provider); - const [activeTab, setActiveTab] = useState('Trade'); const tabs = [ From f4b68e4da45240f7f35a9562a633a92c4dafc74b Mon Sep 17 00:00:00 2001 From: Jadessu Date: Tue, 17 Sep 2024 18:35:42 -0500 Subject: [PATCH 07/11] fix header and z index issue --- .../NFTBannerAccount.tsx | 29 ++++++++++++------- .../TradeChartsHeader/TradeChartsHeader.tsx | 9 ++++-- src/styled/Components/Trade.ts | 2 +- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx index 7b2ee9c192..0a5933fe90 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx @@ -389,7 +389,21 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { useOnClickOutside(NftComponentItemRef, clickOutsideHandler); + const handleSaveButtonClick = (event: React.MouseEvent) => { + event.stopPropagation(); + + if (isSaveActive === 0) { + handleNftSelection(); + setIsSaveActive(!isVerified ? 3 : 1); + + } + + }; + + return ( + + ) => { @@ -399,7 +413,7 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { ref={NftComponentItemRef} > -
+
) => { - event.stopPropagation(); - if (isSaveActive === 0) { - handleNftSelection(); - setIsSaveActive(!isVerified ? 3 : 1); - } - setShowNFTPage(false) - - }} + onClick={ handleSaveButtonClick} > {isSaveActive === 1 ? 'Saving..' @@ -772,6 +778,7 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { text={toastrText} type={toastrType} /> - + + ); } diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx index ca46b23279..50a8f37d8a 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx @@ -40,6 +40,8 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { const { isTradeDollarizationEnabled, setIsTradeDollarizationEnabled } = useContext(PoolContext); + + const { isCondensedModeEnabled, setIsCondensedModeEnabled, @@ -54,6 +56,7 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { } = useContext(TradeDataContext); const { platformName } = useContext(BrandContext); + const isFuta = ['futa'].includes(platformName); const { activeMobileComponent } = useContext(TradeTableContext); @@ -86,14 +89,14 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { const graphSettingsContent = ( - {['futa'].includes(platformName) && ( + {isFuta && ( setShowFutaCandles(!showFutaCandles)} > @@ -229,7 +232,7 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { useMediaQuery('(min-width: 2000px)') ? 'center' : 'flex-start' } padding={props.tradePage ? ' 8px' : '4px 4px 8px 4px'} - style={{background: 'var(--dark1)'}} + style={{background: isFuta ? 'var(--dark1)' : 'var(--dark2)'}} > {tradeTableState === 'Expanded' || showNoChartData diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts index 2da189cb3c..150f3d1762 100644 --- a/src/styled/Components/Trade.ts +++ b/src/styled/Components/Trade.ts @@ -64,7 +64,7 @@ export const ResizableContainer = styled(Resizable)<{ bottom: 0 !important; height: 5px !important; background-color: var(--dark3); - z-index: 99; + z-index: 8; } & > div:last-child > div:nth-child(2), & > div:last-child > div:nth-child(4) { From a7837a3e42fe9acb633e09c32924599f3394c344 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Wed, 18 Sep 2024 13:02:02 -0500 Subject: [PATCH 08/11] fix nft settings issue by moving it to portfolio --- .../PortfolioBanner/PortfolioBanner.tsx | 121 +++++++++++------- .../NFTBannerAccount.module.css | 12 +- .../NFTBannerAccount.tsx | 8 +- .../PortfolioBannerAccount.module.css | 7 + .../PortfolioBannerAccount.tsx | 72 +++-------- .../Portfolio/Portfolio.module.css | 2 + .../platformAmbient/Portfolio/Portfolio.tsx | 64 +++++++++ 7 files changed, 178 insertions(+), 108 deletions(-) diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx index b9a11cde1e..6f145d4b55 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx @@ -8,18 +8,19 @@ import PortfolioBannerAccount from './PortfolioBannerAccount/PortfolioBannerAcco import { trimString } from '../../../ambient-utils/dataLayer'; import NoisyLines from '../../NoisyLines/NoisyLines'; -import styles from './PortfolioBanner.module.css' -import { - UserDataContext, - UserXpDataIF, -} from '../../../contexts/UserDataContext'; -import { Dispatch, SetStateAction, useContext, useMemo } from 'react'; +import styles from './PortfolioBanner.module.css'; +import { UserXpDataIF } from '../../../contexts/UserDataContext'; +import { Dispatch, SetStateAction, useContext, useMemo, useState } from 'react'; import UserLevelDisplay from '../../Global/LevelsCard/UserLevelDisplay'; import { ChainDataContext } from '../../../contexts/ChainDataContext'; import { DefaultTooltip } from '../../Global/StyledTooltip/StyledTooltip'; import { AiOutlineDollarCircle } from 'react-icons/ai'; import { PoolContext } from '../../../contexts/PoolContext'; import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { + NftFetchSettingsIF, + NftListByChain, +} from '../../../contexts/TokenBalanceContext'; interface propsIF { ensName: string; @@ -27,18 +28,40 @@ interface propsIF { connectedAccountActive: boolean; resolvedUserXp: UserXpDataIF; showTabsAndNotExchange: boolean; - setShowTabsAndNotExchange: Dispatch> + setShowTabsAndNotExchange: Dispatch>; + + nftTestWalletInput: string; + setNftTestWalletInput: Dispatch>; + + showNFTPage: boolean; + setShowNFTPage: Dispatch>; + // eslint-disable-next-line + handleTestWalletChange: any; + + NFTData: NftListByChain[] | undefined; + NFTFetchSettings: NftFetchSettingsIF; + setNFTFetchSettings: Dispatch>; + userAddress: `0x${string}` | undefined; } export default function PortfolioBanner(props: propsIF) { - const { ensName, resolvedAddress, connectedAccountActive, resolvedUserXp, showTabsAndNotExchange, setShowTabsAndNotExchange } = - props; - const { userAddress } = useContext(UserDataContext); + const { + ensName, + resolvedAddress, + connectedAccountActive, + resolvedUserXp, + showTabsAndNotExchange, + setShowTabsAndNotExchange, + + showNFTPage, + setShowNFTPage, + handleTestWalletChange, + userAddress, + } = props; const { connectedUserXp } = useContext(ChainDataContext); const desktopScreen = useMediaQuery('(min-width: 768px)'); - const { isTradeDollarizationEnabled, setIsTradeDollarizationEnabled } = useContext(PoolContext); @@ -106,24 +129,22 @@ export default function PortfolioBanner(props: propsIF) { noiseMidPosition={0.8} seed={addressOfAccountDisplayed} animationDuration={3000} - /> ); }, [addressOfAccountDisplayed, document.getElementById(BANNER_ID)]); + const [nftTestWalletInput, setNftTestWalletInput] = useState(''); + // early return is needed if the user is logged out if (!addressOfAccountDisplayed) return null; - - return ( - -
- - - { noisyLines} -
+
+ {noisyLines} +
- {desktopScreen && - - } + + + )}
- -
-
+
); -} \ No newline at end of file +} diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css index b4e0bdedbe..747cb3dbd6 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css @@ -72,10 +72,11 @@ .NFTBannerAccountContainer { display: grid; box-shadow: 4px 4px 6px #0d1117; - position: fixed; - left: calc(50vw - 50px); - top: 0; - transform: translateX(-50%); + /* position: absolute; */ + position: absolute; + top: 160px; + left: 100px; + border-color: var(--accent1); background: #0d1117; @@ -84,5 +85,8 @@ border-style: solid; width: 350px; max-height: 570px; + height: auto; + + } } diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx index 0a5933fe90..dd4b5e1d77 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx @@ -6,7 +6,6 @@ import { DropDownListContainer, LabelSettingsArrow, ListItem, - NFTBannerAccountContainer, NFTBannerFilter, NFTBannerHeader, NFTDisplay, @@ -44,7 +43,7 @@ import { getAvatarForType } from '../../../Chat/ChatRenderUtils'; import { isAutoGeneratedAvatar } from '../../../Chat/ChatUtils'; import useOnClickOutside from '../../../../utils/hooks/useOnClickOutside'; import ChatToaster from '../../../Chat/ChatToaster/ChatToaster'; - +import styles from './NFTBannerAccount.module.css' interface NFTBannerAccountProps { showNFTPage: boolean; setShowNFTPage: React.Dispatch; @@ -404,8 +403,7 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { return ( - ) => { event.stopPropagation(); setIsContractNameOptionTabActive(false); @@ -778,7 +776,7 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) { text={toastrText} type={toastrType} /> - +
); } diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css index bd29016f52..ae7b6d65ff 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css @@ -16,6 +16,13 @@ width: 65px; } + .banner_settings_container{ + background: red; + + z-index: 999; + position: absolute; + } + .deposit_button{ font-size: 12px; outline: none; diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx index c9d9090b35..59d5cf8038 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx @@ -20,8 +20,7 @@ import useCopyToClipboard from '../../../../utils/hooks/useCopyToClipboard'; import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; import { getAvatarForProfilePage } from '../../../Chat/ChatRenderUtils'; import useChatApi from '../../../Chat/Service/ChatApi'; -import NFTBannerAccount from './NFTBannerAccount'; -import Modal from '../../../Global/Modal/Modal'; + interface IPortfolioBannerAccountPropsIF { ensName: string; resolvedAddress: string; @@ -31,13 +30,20 @@ interface IPortfolioBannerAccountPropsIF { connectedAccountActive: boolean; showTabsAndNotExchange: boolean; setShowTabsAndNotExchange: Dispatch>; + + nftTestWalletInput: string; + setNftTestWalletInput: Dispatch>; + + showNFTPage: boolean; + setShowNFTPage: Dispatch>; + // eslint-disable-next-line + handleTestWalletChange: any; } export default function PortfolioBannerAccount( props: IPortfolioBannerAccountPropsIF, ) { const [showAccountDetails, setShowAccountDetails] = useState(false); - const [showNFTPage, setShowNFTPage] = useState(false); const { ensName, @@ -47,20 +53,25 @@ export default function PortfolioBannerAccount( connectedAccountActive, showTabsAndNotExchange, setShowTabsAndNotExchange, + + showNFTPage, + setShowNFTPage, + + nftTestWalletInput, + setNftTestWalletInput, + + handleTestWalletChange, } = props; const { userAddress, userProfileNFT, - isfetchNftTriggered, - setIsfetchNftTriggered, + setUserProfileNFT, setUserThumbnailNFT, - setNftTestWalletAddress, } = useContext(UserDataContext); - const { NFTData, NFTFetchSettings, setNFTFetchSettings } = - useContext(TokenBalanceContext); + const { NFTData } = useContext(TokenBalanceContext); const { snackbar: { open: openSnackbar }, @@ -150,38 +161,10 @@ export default function PortfolioBannerAccount( document.body.addEventListener('keydown', openWalletAddressPanel); }, []); - const [nftTestWalletInput, setNftTestWalletInput] = useState(''); - - function handleTestWalletChange(nftTestWalletInput: string) { - setNftTestWalletAddress(() => nftTestWalletInput); - setIsfetchNftTriggered(() => true); - } - - const showMobileVersion = useMediaQuery('(max-width: 768px)'); - - - const mobileBannerSettings = ( - !showNFTPage ? null : setShowNFTPage(false)}> - { NFTData && ( - - )} - - ); - return (
- {showMobileVersion ? mobileBannerSettings : showNFTPage && NFTData && ( - - )} - {isWalletPanelActive && (
(''); + const [showNFTPage, setShowNFTPage] = useState(false); + + function handleTestWalletChange(nftTestWalletInput: string) { + setNftTestWalletAddress(() => nftTestWalletInput); + setIsfetchNftTriggered(() => true); + } + const portfolioBannerProps = { ensName: connectedAccountActive ? ensName ?? '' @@ -385,6 +403,11 @@ function Portfolio(props: PortfolioPropsIF) { resolvedUserXp: resolvedUserXp, showTabsAndNotExchange: showTabsAndNotExchange, setShowTabsAndNotExchange: setShowTabsAndNotExchange, + + nftTestWalletInput, setNftTestWalletInput, showNFTPage, setShowNFTPage, handleTestWalletChange, + NFTData, NFTFetchSettings, setNFTFetchSettings, + userAddress, + }; const truncatedAccountAddressOrEnsName = connectedAccountActive @@ -443,6 +466,28 @@ function Portfolio(props: PortfolioPropsIF) { const bannerHeight = 115; const contentHeight = availableHeight - bannerHeight; + + + + const mobileBannerSettings = !showNFTPage ? null : ( + setShowNFTPage(false)}> + {NFTData && ( + + )} + + ); + const mobilePortfolio = (
{contentToRenderOnMobile}
+ {mobileBannerSettings}
); @@ -512,6 +558,24 @@ function Portfolio(props: PortfolioPropsIF) { : undefined}
+ + { + showNFTPage && + NFTData && ( + + ) + }
); } From abf0fba6f3a9ba4412f78bb8748df80e5b39ab03 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Wed, 18 Sep 2024 16:33:32 -0500 Subject: [PATCH 09/11] remove max height on futa chart --- .../PortfolioBannerAccount/NFTBannerAccount.module.css | 2 +- src/pages/platformAmbient/Trade/Trade.tsx | 5 +++++ src/styled/Components/Trade.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css index 747cb3dbd6..1eee7ee839 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css @@ -5,7 +5,7 @@ gap: 16px; - outline: 1px solid red; + border-radius: 4px; } .NFTBannerHeader { diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx index c8b6013d94..b06206a2f1 100644 --- a/src/pages/platformAmbient/Trade/Trade.tsx +++ b/src/pages/platformAmbient/Trade/Trade.tsx @@ -366,11 +366,16 @@ function Trade() { flexDirection='column' fullHeight overflow='hidden' + > From 1c73d3feaaa375aa51adab5316e3d5a8b365778a Mon Sep 17 00:00:00 2001 From: Jadessu Date: Wed, 18 Sep 2024 16:42:29 -0500 Subject: [PATCH 10/11] fix resizeable library error --- src/pages/platformAmbient/Trade/Trade.tsx | 6 ++-- src/styled/Components/Trade.ts | 37 ++++++++++++----------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx index b06206a2f1..7b8b154881 100644 --- a/src/pages/platformAmbient/Trade/Trade.tsx +++ b/src/pages/platformAmbient/Trade/Trade.tsx @@ -372,10 +372,8 @@ function Trade() { showResizeable={ !isCandleDataNull && !isChartFullScreen && !isFuta } - style={{ - maxHeight: isFuta ? '100%' : 'calc(100% - 54px)', - - }} + isFuta={isFuta} + enable={{ bottom: !isChartFullScreen, top: false, diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts index ab127fd56c..7925af67bb 100644 --- a/src/styled/Components/Trade.ts +++ b/src/styled/Components/Trade.ts @@ -48,31 +48,32 @@ export const MainSection = styled.section<{ export const ResizableContainer = styled(Resizable)<{ showResizeable: boolean; -}>` + isFuta?: boolean; + }>` display: flex; justify-content: center; align-items: center; overflow: hidden; - - // max-height: calc(100% - 54px); + + max-height: ${({ isFuta }) => (isFuta ? '100%' : 'calc(100% - 54px)')}; min-height: 0px; - + ${({ showResizeable }) => - showResizeable && - ` - & > div:last-child > * { - bottom: 0 !important; - height: 5px !important; - background-color: var(--dark3); - z-index: 8; - } - - & > div:last-child > div:nth-child(2), & > div:last-child > div:nth-child(4) { - z-index: -1; - display: none; - } + showResizeable && + ` + & > div:last-child > * { + bottom: 0 !important; + height: 5px !important; + background-color: var(--dark3); + z-index: 8; + } + + & > div:last-child > div:nth-child(2), & > div:last-child > div:nth-child(4) { + z-index: -1; + display: none; + } `} -`; + `; export const ChartContainer = styled.div<{ fullScreen: boolean; From 511e87be3a7159bd41dfd8b2ec9a9d0fbd832412 Mon Sep 17 00:00:00 2001 From: Jadessu Date: Wed, 18 Sep 2024 16:56:15 -0500 Subject: [PATCH 11/11] fix chart expansion bg color --- .../platformAmbient/Trade/TradeCharts/TradeCharts.tsx | 10 +++++++--- src/styled/Components/Trade.ts | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx index 340ac07fac..f4d5c22baf 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx @@ -103,6 +103,10 @@ function TradeCharts(props: propsIF) { const { pathname } = useLocation(); const smallScreen = useMediaQuery('(max-width: 768px)'); + const isFuta = ['futa'].includes(platformName) + + + const isMarketOrLimitModule = pathname.includes('market') || pathname.includes('limit'); @@ -295,7 +299,7 @@ function TradeCharts(props: propsIF) { />
)} - {!['futa'].includes(platformName) && ( + {!isFuta && (

Curve/Depth:

@@ -338,10 +342,10 @@ function TradeCharts(props: propsIF) { fullWidth style={{ padding: - isChartFullScreen || ['futa'].includes(platformName) + isChartFullScreen || isFuta ? '1rem' : '0', - background: isChartFullScreen ? 'var(--dark2)' : '', + background: isChartFullScreen ? isFuta ? 'var(--dark1)' : 'var(--dark2)' : '', }} ref={chartCanvasRef} > diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts index 7925af67bb..8ba53998eb 100644 --- a/src/styled/Components/Trade.ts +++ b/src/styled/Components/Trade.ts @@ -55,7 +55,7 @@ export const ResizableContainer = styled(Resizable)<{ align-items: center; overflow: hidden; - max-height: ${({ isFuta }) => (isFuta ? '100%' : 'calc(100% - 54px)')}; + max-height: ${({ isFuta }) => (isFuta ? 'calc(100% - 5px)' : 'calc(100% - 54px)')}; min-height: 0px; ${({ showResizeable }) =>