Merge pull request #4135 from CrocSwap/address-issues-sep-16

Address issues sep 16
CrocSwap · Sep 19, 2024 · 84e44e1 · 84e44e1
2 parents 61a072d + 511e87b
commit 84e44e1
Show file tree

Hide file tree

Showing 24 changed files with 604 additions and 379 deletions.
diff --git 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/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
@@ -1,11 +1,15 @@
-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';
 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,37 @@ 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: <MdOutlineExplore size={24} color='var(--text1)' />,
         },
-        {
-            label: 'Account',
-            link: '/account',
-            icon: <RiAccountCircleLine size={24} color='var(--text1)' />,
-        },
         {
             label: 'Create',
             link: '/create',
             icon: <FiPlusCircle size={24} color='var(--text1)' />,
         },
+        {
+            label: 'Swap',
+            link: '/swap/' + paramsSlug,
+            icon: <MdOutlineSwapVerticalCircle size={24} color='var(--text1)' />,
+        },
+
+        {
+            label: 'Account',
+            link: '/account',
+            icon: <RiAccountCircleLine size={24} color='var(--text1)' />,
+        },
     ];
 
     const desktopScreen = useMediaQuery('(min-width: 780px)');

diff --git 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/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);
-    }
+
 }
diff --git a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx
@@ -29,6 +29,7 @@ interface propsIF {
     setFullLayoutActive: Dispatch<SetStateAction<boolean>>;
     setTokenModalOpen?: Dispatch<SetStateAction<boolean>>;
     isModalView?: boolean;
+    setIsAutoLayout?: Dispatch<SetStateAction<boolean>> | 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 = (
         <div className={styles.portfolio_control_container}
             id='portfolio_sidebar_toggle'
-            onClick={() => setFullLayoutActive(!fullLayoutActive)}
+            onClick={toggleFullLayoutActive}
         >
             <IconWithTooltip title='Exchange Balance' placement='bottom'>
                 <img

diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.module.css
@@ -92,6 +92,7 @@
         background: var(--dark1);
         padding: 1rem;
         border: none;
+        overflow: hidden;
     }
     .portfolio_banner_rectangle_content {
         justify-content: flex-end;

diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx
@@ -8,37 +8,60 @@ 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;
     resolvedAddress: string;
     connectedAccountActive: boolean;
     resolvedUserXp: UserXpDataIF;
     showTabsAndNotExchange: boolean;
-    setShowTabsAndNotExchange: Dispatch<SetStateAction<boolean>>
+    setShowTabsAndNotExchange: Dispatch<SetStateAction<boolean>>;
+
+    nftTestWalletInput: string;
+    setNftTestWalletInput: Dispatch<SetStateAction<string>>;
+
+    showNFTPage: boolean;
+    setShowNFTPage: Dispatch<SetStateAction<boolean>>;
+    // eslint-disable-next-line
+    handleTestWalletChange: any;
+
+    NFTData: NftListByChain[] | undefined;
+    NFTFetchSettings: NftFetchSettingsIF;
+    setNFTFetchSettings: Dispatch<SetStateAction<NftFetchSettingsIF>>;
+    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<string>('');
+
     // early return is needed if the user is logged out
     if (!addressOfAccountDisplayed) return null;
 
-
-
     return (
-
-        <div className={styles.portfolio_banner_rectangle_container} id={BANNER_ID}>
-
-
-            { noisyLines}
-            <div className={styles.portfolio_banner_rectangle_content}
-            >
+        <div
+            className={styles.portfolio_banner_rectangle_container}
+            id={BANNER_ID}
+        >
+            {noisyLines}
+            <div className={styles.portfolio_banner_rectangle_content}>
                 <PortfolioBannerAccount
                     ensName={ensName}
                     ensNameAvailable={ensNameAvailable}
@@ -133,41 +154,47 @@ export default function PortfolioBanner(props: propsIF) {
                     connectedAccountActive={connectedAccountActive}
                     showTabsAndNotExchange={showTabsAndNotExchange}
                     setShowTabsAndNotExchange={setShowTabsAndNotExchange}
+                    nftTestWalletInput={nftTestWalletInput}
+                    setNftTestWalletInput={setNftTestWalletInput}
+                    showNFTPage={showNFTPage}
+                    setShowNFTPage={setShowNFTPage}
+                    handleTestWalletChange={handleTestWalletChange}
                 />
-         {desktopScreen &&       <DefaultTooltip
-                    interactive
-                    title={'Toggle USD Price Estimates'}
-                    enterDelay={500}
-                >
-                    <button className={styles.header_button}
-                        onClick={() =>
-                            setIsTradeDollarizationEnabled((prev) => !prev)
-                        }
-                        style={{ zIndex: '2' }}
+                {desktopScreen && (
+                    <DefaultTooltip
+                        interactive
+                        title={'Toggle USD Price Estimates'}
+                        enterDelay={500}
                     >
-                        <AiOutlineDollarCircle
-                            size={20}
-                            id='trade_dollarized_prices_button'
-                            aria-label='Toggle dollarized prices button'
-                            style={{
-                                color: isTradeDollarizationEnabled
-                                    ? 'var(--accent1)'
-                                    : undefined,
-                            }}
-                        />
-                    </button>
-                </DefaultTooltip>}
+                        <button
+                            className={styles.header_button}
+                            onClick={() =>
+                                setIsTradeDollarizationEnabled((prev) => !prev)
+                            }
+                            style={{ zIndex: '2' }}
+                        >
+                            <AiOutlineDollarCircle
+                                size={20}
+                                id='trade_dollarized_prices_button'
+                                aria-label='Toggle dollarized prices button'
+                                style={{
+                                    color: isTradeDollarizationEnabled
+                                        ? 'var(--accent1)'
+                                        : undefined,
+                                }}
+                            />
+                        </button>
+                    </DefaultTooltip>
+                )}
             </div>
 
             <div className={styles.portfolio_banner_level_container}>
-
-
                 <UserLevelDisplay
                     currentLevel={xpData?.data?.currentLevel}
                     globalPoints={xpData?.data?.globalPoints}
                     user={userLink}
                 />
             </div>
-            </div>
+        </div>
     );
-}
+}