Merge branch 'develop' into mobile-liq-buffer

CrocSwap · Oct 10, 2024 · 102cfbf · 102cfbf
2 parents caf9d24 + d50a401
commit 102cfbf
Show file tree

Hide file tree

Showing 65 changed files with 1,122 additions and 1,779 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ambient-ts-app",
-    "version": "2.9.1",
+    "version": "2.9.2",
     "private": true,
     "type": "module",
     "dependencies": {
@@ -11,7 +11,6 @@
         "@material-ui/core": "^4.12.4",
         "@mui/material": "^5.8.2",
         "@web3modal/ethers": "4.2.1",
-        "alchemy-sdk": "^3.4.2",
         "alea": "^1.0.1",
         "babel-plugin-styled-components": "^2.1.4",
         "d3": "^7.4.4",
@@ -33,7 +32,7 @@
         "react-color": "^2.19.3",
         "react-dom": "^18.3.1",
         "react-i18next": "^12.3.1",
-        "react-icons": "^5.2.1",
+        "react-icons": "^5.3.0",
         "react-idle-timer": "^5.7.2",
         "react-jazzicon": "^1.0.4",
         "react-lottie-player": "^2.1.0",

diff --git a/public/ambient-token-list.json b/public/ambient-token-list.json
@@ -331,6 +331,14 @@
             "chainId": 534352,
             "logoURI": "https://assets.coingecko.com/coins/images/6319/thumb/USD_Coin_icon.png"
         },
+        {
+            "chainId": 534352,
+            "address": "0xd29687c813d741e2f938f4ac377128810e217b1b",
+            "name": "Scroll",
+            "symbol": "SCR",
+            "decimals": 18,
+            "logoURI": "https://assets.coingecko.com/coins/images/50571/thumb/scroll.jpg?1728376125"
+        },
         {
             "name": "Pirex Ether OFT",
             "address": "0x9e0d7d79735e1c63333128149c7b616a0dc0bbdb",
@@ -363,14 +371,6 @@
             "chainId": 534352,
             "logoURI": ""
         },
-        {
-            "name": "Tranchess DAO Token",
-            "address": "0x9735fb1126b521a913697a541f768376011bccf9",
-            "symbol": "CHESS",
-            "decimals": 18,
-            "chainId": 534352,
-            "logoURI": "https://scrollscan.com/token/images/tranchess_32.png"
-        },
         {
             "name": "StargateToken",
             "address": "0x8731d54E9D02c286767d56ac03e8037C07e01e98",

diff --git a/src/App/App.css b/src/App/App.css
@@ -231,40 +231,7 @@ input[type='number'] {
     appearance: textfield;
     -moz-appearance: textfield;
 }
-.custom_scroll_ambient {
-    overflow-y: auto !important;
-
-}
-.custom_scroll_ambient::-webkit-scrollbar,
-.content-container::-webkit-scrollbar {
-    width: 8px !important; /* Adjust the width as needed */
-}
-.custom_scroll_ambient::-webkit-scrollbar-thumb,
-.content-container::-webkit-scrollbar-thumb {
-    border: 2px solid transparent !important; /* Space for the border */
-    background-clip: padding-box !important; /* Create space for the border */
-    border-radius: 8px !important; /* Adjust the border radius as needed */
-    background-image: linear-gradient(#06060c, #06060c),
-        linear-gradient(
-            0deg,
-            var(--accent1) 0%,
-            var(--accent5) 49.48%,
-            var(--accent1) 100%
-        ) !important;
-    background-origin: border-box !important;
-    background-clip: content-box, border-box !important; /* Clip the border to show gradient */
-    min-height: 50px !important; /* Set the minimum height for the scrollbar thumb */;
-
-
-
-}
-.custom_scroll_ambient::-webkit-scrollbar-track,
-.content-container::-webkit-scrollbar-track {
-    background: #06060c !important; /* Background color of the scrollbar track */
-    border-radius: 8px !important; /* Adjust the border radius as needed */
-    padding: 2px !important; /* Add padding to the track */;
-
-}
+
 /* -----------------------FUTA------------ */
 
 .futa_main {
@@ -356,6 +323,29 @@ input[type='number'] {
         pointer-events: none;
         /* display: none; */
     }
+
+    .custom_scroll_ambient::-webkit-scrollbar {
+        width: 5px !important;
+      }
+
+
+      /* Handle */
+      .custom_scroll_ambient::-webkit-scrollbar-thumb {
+        background: 
+        linear-gradient(
+            0deg,
+            var(--accent1) 0%,
+            var(--accent5) 49.48%,
+            var(--accent1) 100%
+        ) !important;
+      }
+
+      /* .custom_scroll_ambient{
+        scrollbar-width: thin;
+scrollbar-color: transparent;
+      } */
+
+
 }
 
 @media only screen and (min-width: 1280px) {

diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -27,6 +27,8 @@ import FooterNav from '../components/Global/FooterNav/FooterNav';
 import { RouteRenderer } from '../routes';
 import Navbar from '../components/Futa/Navbar/Navbar';
 import Footer from '../components/Futa/Footer/Footer';
+import { useModal } from '../components/Global/Modal/useModal';
+import CSSModal from '../pages/common/CSSDebug/CSSModal';
 
 /** ***** React Function *******/
 export default function App() {
@@ -102,16 +104,8 @@ export default function App() {
     }, [location]);
 
     const showMobileVersion = useMediaQuery('(max-width: 800px)');
-    // const showChatPanel =
-    //     currentLocation !== '/' &&
-    //     currentLocation !== '/404' &&
-    //     currentLocation !== '/terms' &&
-    //     currentLocation !== '/privacy' &&
-    //     currentLocation !== '/faq' &&
-    //     !currentLocation.includes('/chat') &&
-    //     isChatEnabled;
     const ambientFooter = (
-        <div data-theme={skin} className='footer_container'>
+        <div data-theme={skin.active} className='footer_container'>
             {currentLocation !== '/' &&
                 currentLocation !== '/404' &&
                 currentLocation !== '/terms' &&
@@ -123,6 +117,26 @@ export default function App() {
         </div>
     );
 
+    // logic to handle opening and closing of the CSS modal
+    const [isCSSModalOpen, openCSSModal, closeCSSModal] = useModal();
+    // bind keyboard event to toggle CSS modal open or closed
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent): void => {
+            if (
+                (e.ctrlKey || e.metaKey) &&
+                e.shiftKey &&
+                e.key.toLowerCase() === 'k'
+            ) {
+                isCSSModalOpen ? closeCSSModal() : openCSSModal();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isCSSModalOpen]);
+
     return (
         <>
             {location.pathname == '/' && platformName !== 'futa' && (
@@ -133,7 +147,7 @@ export default function App() {
                 className={
                     platformName === 'futa' ? 'futa_main' : containerStyle
                 }
-                data-theme={skin}
+                data-theme={skin.active}
                 style={{
                     height:
                         location.pathname == '/'
@@ -152,25 +166,17 @@ export default function App() {
                 ) : (
                     location.pathname !== '/' && <PageHeader />
                 )}
-                {/* <div
-                    className={appHeaderDropdown.isActive ? 'app_blur' : ''}
-                    onClick={() => appHeaderDropdown.setIsActive(false)}
-                    
-                    onTouchMoveCapture={() =>
-                        appHeaderDropdown.setIsActive(false)
-                    }
-                /> */}
                 <RouteRenderer platformName={platformName} />
             </FlexContainer>
             {platformName === 'futa' ? (
-                <Footer data-theme={skin} />
+                <Footer data-theme={skin.active} />
             ) : (
                 ambientFooter
             )}
-
-            <GlobalPopup data-theme={skin} />
+            <GlobalPopup data-theme={skin.active} />
             <SnackbarComponent />
             {isWalletModalOpen && <GateWalletModal />}
+            {isCSSModalOpen && <CSSModal close={() => closeCSSModal()} />}
         </>
     );
 }
diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
     useEffect,
     useState,
     memo,
@@ -10,16 +10,13 @@ import { AnimateSharedLayout, motion } from 'framer-motion';
 import UserMenu from './UserMenu/UserMenu';
 import NetworkSelector from './NetworkSelector/NetworkSelector';
 import logo from '../../../assets/images/logos/logo_mark.svg';
-// import { BiGitBranch } from 'react-icons/bi';
-// import { APP_ENVIRONMENT, BRANCH_NAME } from '../../../ambient-utils/constants';
 import TradeNowButton from '../../../components/Home/Landing/TradeNowButton/TradeNowButton';
 import useMediaQuery from '../../../utils/hooks/useMediaQuery';
 import { AppStateContext } from '../../../contexts/AppStateContext';
 import { CrocEnvContext } from '../../../contexts/CrocEnvContext';
 import { PoolContext } from '../../../contexts/PoolContext';
 import { SidebarContext } from '../../../contexts/SidebarContext';
 import { TradeTokenContext } from '../../../contexts/TradeTokenContext';
-
 import { TradeTableContext } from '../../../contexts/TradeTableContext';
 import {
     getFormattedNumber,
@@ -32,31 +29,23 @@ import {
     swapParamsIF,
     useLinkGen,
 } from '../../../utils/hooks/useLinkGen';
-
 import { FlexContainer } from '../../../styled/Common';
 import Button from '../../../components/Form/Button';
-// import { version as appVersion } from '../../../../package.json';
 import { UserDataContext } from '../../../contexts/UserDataContext';
 import { GraphDataContext } from '../../../contexts/GraphDataContext';
 import { TokenBalanceContext } from '../../../contexts/TokenBalanceContext';
 import { TradeDataContext } from '../../../contexts/TradeDataContext';
 import { ReceiptContext } from '../../../contexts/ReceiptContext';
-import { BrandContext } from '../../../contexts/BrandContext';
+import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
 import styles from './PageHeader.module.css';
-// import MobileDropdown from './MobileDropdown/MobileDropdown';
-// import { GiHamburgerMenu } from 'react-icons/gi';
 
 const PageHeader = function () {
     const {
         crocEnv,
         setCrocEnv,
         chainData: { chainId, poolIndex: poolId },
     } = useContext(CrocEnvContext);
-    const { headerImage } = useContext(BrandContext);
-    // const isDevMenuEnabled =
-    //     import.meta.env.VITE_IS_DEV_MENU_ENABLED !== undefined
-    //         ? import.meta.env.VITE_IS_DEV_MENU_ENABLED === 'true'
-    //         : true;
+    const { headerImage } = useContext<BrandContextIF>(BrandContext);
 
     const {
         walletModal: { open: openWalletModal },
@@ -418,8 +407,6 @@ const PageHeader = function () {
         };
     }, []);
 
-    // const [showDevMenu, setShowDevMenu] = useState(false);
-
     return (
         <>
             <header
@@ -469,16 +456,8 @@ const PageHeader = function () {
                                 overflow='visible'
                             >
                                 <NetworkSelector />
-
                                 {!isUserConnected && connectWagmiButton}
                                 <UserMenu {...userMenuProps} />
-                                {/* {isDevMenuEnabled && !desktopScreen &&  (
-                                    <GiHamburgerMenu
-                                        onClick={() =>
-                                            setShowDevMenu(!showDevMenu)
-                                        }
-                                    />
-                                )} */}
                             </FlexContainer>
                         </div>
                     )}

diff --git a/src/ambient-utils/api/fetchNft.ts b/src/ambient-utils/api/fetchNft.ts
@@ -1,31 +1,39 @@
 import { CrocEnv } from '@crocswap-libs/sdk';
 import { memoizePromiseFn } from '../dataLayer/functions/memoizePromiseFn';
-import { Alchemy } from 'alchemy-sdk';
+import { ALCHEMY_API_KEY } from '../constants';
 
 export const fetchNFT = async (
     address: string,
     crocEnv: CrocEnv | undefined,
-    client: Alchemy,
     pageKey: string,
     pageSize: number,
 ): Promise<fetchNFTReturn> => {
-    if (!crocEnv) return;
-
-    const nftsForOwnerResponse = await client.nft.getNftsForOwner(address, {
-        pageKey: pageKey,
-        pageSize: pageSize,
-    });
-
-    const nftData = nftsForOwnerResponse.ownedNfts;
-    const totalNFTCount = nftsForOwnerResponse.totalCount;
-    const pageKeyResponse = nftsForOwnerResponse.pageKey;
-
-    return {
-        NFTData: nftData,
-        totalNFTCount: totalNFTCount,
-        pageKey: pageKeyResponse,
-        userHasNFT: nftsForOwnerResponse.totalCount > 0,
-    };
+    if (!crocEnv || !ALCHEMY_API_KEY) return;
+
+    const options = { method: 'GET', headers: { accept: 'application/json' } };
+
+    try {
+        const response = await fetch(
+            `https://eth-mainnet.g.alchemy.com/nft/v3/${ALCHEMY_API_KEY}/getNFTsForOwner?owner=${address}&withMetadata=true&pageSize=${pageSize}&pageKey=${pageKey}`,
+            options,
+        );
+
+        const data = await response.json();
+
+        const nftData = data.ownedNfts;
+        const totalNFTCount = data.totalCount;
+        const pageKeyResponse = data.pageKey;
+
+        return {
+            NFTData: nftData,
+            totalNFTCount: totalNFTCount,
+            pageKey: pageKeyResponse,
+            userHasNFT: totalNFTCount > 0,
+        };
+    } catch (error) {
+        console.error(error);
+        return undefined;
+    }
 };
 
 export type fetchNFTReturn =
@@ -41,7 +49,6 @@ export type fetchNFTReturn =
 export type NFTQueryFn = (
     address: string,
     crocEnv: CrocEnv | undefined,
-    client: Alchemy,
     pageKey: string,
     pageSize: number,
 ) => Promise<fetchNFTReturn>;

diff --git a/src/ambient-utils/constants/ambient-token-list.json b/src/ambient-utils/constants/ambient-token-list.json
@@ -331,6 +331,14 @@
             "chainId": 534352,
             "logoURI": "https://assets.coingecko.com/coins/images/6319/thumb/USD_Coin_icon.png"
         },
+        {
+            "chainId": 534352,
+            "address": "0xd29687c813d741e2f938f4ac377128810e217b1b",
+            "name": "Scroll",
+            "symbol": "SCR",
+            "decimals": 18,
+            "logoURI": "https://assets.coingecko.com/coins/images/50571/thumb/scroll.jpg?1728376125"
+        },
         {
             "name": "Pirex Ether OFT",
             "address": "0x9e0d7d79735e1c63333128149c7b616a0dc0bbdb",
@@ -363,14 +371,6 @@
             "chainId": 534352,
             "logoURI": ""
         },
-        {
-            "name": "Tranchess DAO Token",
-            "address": "0x9735fb1126b521a913697a541f768376011bccf9",
-            "symbol": "CHESS",
-            "decimals": 18,
-            "chainId": 534352,
-            "logoURI": "https://scrollscan.com/token/images/tranchess_32.png"
-        },
         {
             "name": "StargateToken",
             "address": "0x8731d54E9D02c286767d56ac03e8037C07e01e98",