diff --git a/package.json b/package.json index d4b6c6dba0..f372309c98 100644 --- 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 index e564dfc90a..53571d1ad9 100644 --- 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 index 53c59f28da..8596561b5d 100644 --- 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 index fc284a9553..24c877e0cd 100644 --- 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 = ( -
+
{currentLocation !== '/' && currentLocation !== '/404' && currentLocation !== '/terms' && @@ -123,6 +117,26 @@ export default function App() {
); + // 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 !== '/' && )} - {/*
appHeaderDropdown.setIsActive(false)} - - onTouchMoveCapture={() => - appHeaderDropdown.setIsActive(false) - } - /> */} {platformName === 'futa' ? ( -
+
) : ( ambientFooter )} - - + {isWalletModalOpen && } + {isCSSModalOpen && closeCSSModal()} />} ); } diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx index 334a1db6b6..02e65d9796 100644 --- 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,8 +10,6 @@ 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'; @@ -19,7 +17,6 @@ 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,19 +29,15 @@ 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 { @@ -52,11 +45,7 @@ const PageHeader = function () { 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(BrandContext); const { walletModal: { open: openWalletModal }, @@ -418,8 +407,6 @@ const PageHeader = function () { }; }, []); - // const [showDevMenu, setShowDevMenu] = useState(false); - return ( <>
- {!isUserConnected && connectWagmiButton} - {/* {isDevMenuEnabled && !desktopScreen && ( - - setShowDevMenu(!showDevMenu) - } - /> - )} */}
)} diff --git a/src/ambient-utils/api/fetchNft.ts b/src/ambient-utils/api/fetchNft.ts index a7f84984e8..597c066d00 100644 --- 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 => { - 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; diff --git a/src/ambient-utils/constants/ambient-token-list.json b/src/ambient-utils/constants/ambient-token-list.json index e564dfc90a..53571d1ad9 100644 --- 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", diff --git a/src/ambient-utils/constants/defaultTokens.ts b/src/ambient-utils/constants/defaultTokens.ts index 37afab2572..c0cffa7ed5 100644 --- a/src/ambient-utils/constants/defaultTokens.ts +++ b/src/ambient-utils/constants/defaultTokens.ts @@ -443,6 +443,16 @@ export const scrollWeETH: TokenIF = { 'https://tokenlogo.xyz/assets/token/0x7e7d4467112689329f7e06571ed0e8cbad4910ee.svg', }; +export const scrollScroll: TokenIF = { + name: 'Scroll', + address: '0xd29687c813d741e2f938f4ac377128810e217b1b', + symbol: 'SCR', + decimals: 18, + chainId: 534352, + logoURI: + 'https://assets.coingecko.com/coins/images/50571/thumb/scroll.jpg?1728376125', +}; + export const scrollSCROLLY: TokenIF = { name: 'Scrolly The Map', address: '0xb65aD8d81d1E4Cb2975352338805AF6e39BA8Be8', @@ -750,6 +760,7 @@ export const defaultTokens: TokenIF[] = [ scrollWrappedETH, scrollWstETH, scrollWeETH, + scrollScroll, scrollSCROLLY, scrollSTG, scrollSCRIBES, diff --git a/src/assets/branding/ambientProductionBrandAssets.ts b/src/assets/branding/ambientProductionBrandAssets.ts index 316e1e5bf2..3b1febf102 100644 --- a/src/assets/branding/ambientProductionBrandAssets.ts +++ b/src/assets/branding/ambientProductionBrandAssets.ts @@ -7,7 +7,9 @@ export const ambientProductionBrandAssets: brandIF = { networks: { // scroll mainnet '0x82750': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -16,7 +18,9 @@ export const ambientProductionBrandAssets: brandIF = { }, // blast mainnet '0x13e31': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -25,7 +29,9 @@ export const ambientProductionBrandAssets: brandIF = { }, // ethereum mainnet '0x1': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [{ content: 'ambient', processAs: 'text' }], }, }, diff --git a/src/assets/branding/ambientTestnetBrandAssets.ts b/src/assets/branding/ambientTestnetBrandAssets.ts index b4298f6ba6..14607dadc3 100644 --- a/src/assets/branding/ambientTestnetBrandAssets.ts +++ b/src/assets/branding/ambientTestnetBrandAssets.ts @@ -7,12 +7,16 @@ export const ambientTestnetBrandAssets: brandIF = { networks: { // ethereum sepolia '0xaa36a7': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [{ content: 'ambient', processAs: 'text' }], }, // scroll sepolia '0x8274f': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -21,7 +25,9 @@ export const ambientTestnetBrandAssets: brandIF = { }, // blast sepolia '0xa0c71fd': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, diff --git a/src/assets/branding/blastBrandAssets.ts b/src/assets/branding/blastBrandAssets.ts index c3d2971947..7b6a0e5ea9 100644 --- a/src/assets/branding/blastBrandAssets.ts +++ b/src/assets/branding/blastBrandAssets.ts @@ -5,7 +5,9 @@ import blastLogo from '../../assets/images/logos/blast_logo.svg'; export const blastBrandAssets: brandIF = { networks: { '0x13e31': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, diff --git a/src/assets/branding/defaultBrandAssets.ts b/src/assets/branding/defaultBrandAssets.ts index 3743ead628..6c3bb09063 100644 --- a/src/assets/branding/defaultBrandAssets.ts +++ b/src/assets/branding/defaultBrandAssets.ts @@ -7,7 +7,9 @@ export const defaultBrandAssets: brandIF = { networks: { // scroll mainnet '0x82750': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -16,7 +18,9 @@ export const defaultBrandAssets: brandIF = { }, // blast mainnet '0x13e31': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -25,17 +29,23 @@ export const defaultBrandAssets: brandIF = { }, // ethereum mainnet '0x1': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [{ content: 'ambient', processAs: 'text' }], }, // ethereum sepolia '0xaa36a7': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [{ content: 'ambient', processAs: 'text' }], }, // scroll sepolia '0x8274f': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, @@ -44,7 +54,9 @@ export const defaultBrandAssets: brandIF = { }, // blast sepolia '0xa0c71fd': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, diff --git a/src/assets/branding/futaBrandAssets.ts b/src/assets/branding/futaBrandAssets.ts index 0489792598..5346bc326c 100644 --- a/src/assets/branding/futaBrandAssets.ts +++ b/src/assets/branding/futaBrandAssets.ts @@ -5,7 +5,9 @@ export const futaBrandAssets: brandIF = { networks: { // ethereum sepolia '0xaa36a7': { - color: 'futa_dark', + // first value in array is default color scheme + color: ['futa_dark', 'purple_dark', 'purple_light'], + premiumColor: [], hero: [{ content: 'futa', processAs: 'text' }], }, }, diff --git a/src/assets/branding/index.ts b/src/assets/branding/index.ts index 5105d02d23..be020ad20c 100644 --- a/src/assets/branding/index.ts +++ b/src/assets/branding/index.ts @@ -4,3 +4,4 @@ export { ambientTestnetBrandAssets } from './ambientTestnetBrandAssets'; export { blastBrandAssets } from './blastBrandAssets'; export { scrollBrandAssets } from './scrollBrandAssets'; export { futaBrandAssets } from './futaBrandAssets'; +export { sampleBrandAssets } from './sampleBrandAssets'; \ No newline at end of file diff --git a/src/assets/branding/sampleBrandAssets.ts b/src/assets/branding/sampleBrandAssets.ts new file mode 100644 index 0000000000..778cce4de2 --- /dev/null +++ b/src/assets/branding/sampleBrandAssets.ts @@ -0,0 +1,20 @@ +import { brandIF } from './types'; +import pageHeaderTestBanner from '../../assets/images/Temporary/pageHeaderTestBanner.png'; + +export const sampleBrandAssets: brandIF = { + networks: { + // ethereum sepolia + '0x1': { + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], + hero: [{ content: 'futa', processAs: 'text' }], + }, + }, + platformName: 'futa', + fontSet: 'futa', + showPoints: false, + showDexStats: false, + headerImage: pageHeaderTestBanner as string, + includeCanto: false, +}; \ No newline at end of file diff --git a/src/assets/branding/scrollBrandAssets.ts b/src/assets/branding/scrollBrandAssets.ts index c9093672dd..74afbbc951 100644 --- a/src/assets/branding/scrollBrandAssets.ts +++ b/src/assets/branding/scrollBrandAssets.ts @@ -6,7 +6,9 @@ export const scrollBrandAssets: brandIF = { networks: { // scroll mainnet '0x82750': { - color: 'purple_dark', + // first value in array is default color scheme + color: ['purple_dark', 'purple_light', 'futa_dark'], + premiumColor: [], hero: [ { content: 'ambient', processAs: 'text' }, { content: '×', processAs: 'separator' }, diff --git a/src/assets/branding/types.ts b/src/assets/branding/types.ts index 8b765f00c0..68fc82ae9d 100644 --- a/src/assets/branding/types.ts +++ b/src/assets/branding/types.ts @@ -12,7 +12,8 @@ export type networkPrefs = Partial< Record< chainIds, { - color: skins; + color: skins[]; + premiumColor: skins[]; hero: heroItem[]; } > diff --git a/src/assets/images/Temporary/pageHeaderTestBanner.png b/src/assets/images/Temporary/pageHeaderTestBanner.png new file mode 100644 index 0000000000..cbd5f9a3e5 Binary files /dev/null and b/src/assets/images/Temporary/pageHeaderTestBanner.png differ diff --git a/src/assets/images/tokens/SCR.svg b/src/assets/images/tokens/SCR.svg new file mode 100644 index 0000000000..0e07355856 --- /dev/null +++ b/src/assets/images/tokens/SCR.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/tokens/exports.ts b/src/assets/images/tokens/exports.ts index 88c2f6d05e..dd77b3ef4f 100644 --- a/src/assets/images/tokens/exports.ts +++ b/src/assets/images/tokens/exports.ts @@ -44,6 +44,7 @@ import BIG from './BIG.jpg'; import PUNKETH20 from './PUNKETH-20.jpeg'; import RSETH from './RSETH.webp'; import SCROLLY from './SCROLLY.webp'; +import SCR from './SCR.svg'; import WEETH from './WEETH.svg'; import BLAST from './BLAST.png'; import ZCAT from './ZCAT.webp'; @@ -100,6 +101,7 @@ export { PUNKETH20, RSETH, SCROLLY, + SCR, WEETH, BLAST, ZCAT, diff --git a/src/components/Global/ContentContainer/ContentContainer.module.css b/src/components/Global/ContentContainer/ContentContainer.module.css index 2040ca11c1..9be3d21d49 100644 --- a/src/components/Global/ContentContainer/ContentContainer.module.css +++ b/src/components/Global/ContentContainer/ContentContainer.module.css @@ -46,11 +46,17 @@ /* max-width: 500px; */ width: 100%; } + + .swap_route{ + border: none; + padding: 0 8px; + + } } @media (min-width: 768px) { .swap_route { - max-width: 440px; + width: 440px; } .main_content { diff --git a/src/components/Global/TransactionDetails/TransactionDetailsHeader/TransactionDetailsHeader.module.css b/src/components/Global/DetailsHeader/DetailsHeader.module.css similarity index 54% rename from src/components/Global/TransactionDetails/TransactionDetailsHeader/TransactionDetailsHeader.module.css rename to src/components/Global/DetailsHeader/DetailsHeader.module.css index 0208671a4f..45dc1840a7 100644 --- a/src/components/Global/TransactionDetails/TransactionDetailsHeader/TransactionDetailsHeader.module.css +++ b/src/components/Global/DetailsHeader/DetailsHeader.module.css @@ -1,54 +1,56 @@ .container { - width: 100%; + /* width: 100%; display: flex; justify-content: space-between; flex-direction: row; align-items: center; padding: 1rem; cursor: default; - height: 60px; + height: 60px; */ +display: flex; +align-items: center; +justify-content: space-between; +height: 60px; +padding: 0 1rem; } .logo_container { + display: flex; flex-direction: row; align-items: center; - justify-content: space-between; + gap: 8px; + max-width: 300px; } .logo { height: 35px; - margin-left: 18px; + } .logo_text { width: 176px; - margin-left: 10px; + } .settings_control { + height: 100%; display: flex; flex-direction: row; - - gap: 8px; + align-items: center; justify-content: center; -} -.settings_control_mobile { - margin-top: 35px; - justify-content: center; + gap: 8px; + + } -.mobile_close_header { +.settings_control div, .settings_control svg{ display: flex; - justify-content: center; align-items: center; } -.settings_control div { - cursor: pointer; -} .info_button { cursor: pointer; @@ -57,5 +59,26 @@ background: var(--accent1); border-radius: var(--border-radius); width: 70px; - height: 25px; + height: 23px; +} + +@media only screen and (max-width: 600px){ + .container{ + height: 40px; + + } + +.info_button{ + background: transparent; + width: auto; + height: auto; +} + +.logo_text, .logo{ + + margin-left: none; +} +.logo_text{ + width: 110px; } +} \ No newline at end of file diff --git a/src/components/Global/DetailsHeader/DetailsHeader.tsx b/src/components/Global/DetailsHeader/DetailsHeader.tsx new file mode 100644 index 0000000000..a84ec92584 --- /dev/null +++ b/src/components/Global/DetailsHeader/DetailsHeader.tsx @@ -0,0 +1,89 @@ +import { Dispatch, SetStateAction } from 'react'; +import { CgClose } from 'react-icons/cg'; +import IconWithTooltip from '../../Global/IconWithTooltip/IconWithTooltip'; +import styles from './DetailsHeader.module.css'; +import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import logo from '../../../assets/images/logos/logo_mark.svg'; +import logoText from '../../../assets/images/logos/logo_text.png'; +import { RiScreenshot2Fill } from 'react-icons/ri'; +import { LuCopy, LuShare2 } from 'react-icons/lu'; +import { TbListDetails } from 'react-icons/tb'; +interface DetailsHeaderPropsIF { + onClose: () => void; + handleCopyAction: () => void; // e.g., copy position ID, transaction hash, etc. + copyToClipboard: () => Promise; // e.g., copy details to clipboard + showShareComponent: boolean; + setShowShareComponent: Dispatch>; + tooltipCopyAction: string; // tooltip message for copy action (e.g., "Copy position slot ID") + tooltipCopyImage: string; // tooltip message for copying image (e.g., "Copy shareable image") + isMobileLayout?: boolean; // optional prop to adjust layout for mobile (used in TransactionDetailsHeader) +} + +export default function DetailsHeader(props: DetailsHeaderPropsIF) { + const { + onClose, + handleCopyAction, + copyToClipboard, + showShareComponent, + setShowShareComponent, + tooltipCopyAction, + tooltipCopyImage, + } = props; + + const isMobile = useMediaQuery('(max-width: 600px)'); + + const copyActionIconWithTooltip = ( + +
+ +
+ + ); + + const copyImageIconWithTooltip = ( + +
+ +
+ + ); + + return ( +
+
+ ambient + ambient +
+ {/*
something here
*/} + +
+ {!showShareComponent ? copyActionIconWithTooltip : null} + {showShareComponent ? copyImageIconWithTooltip : null} + + +
+ +
+
+
+ ); +} diff --git a/src/components/Global/Explore/DexTokens/DexTokens.module.css b/src/components/Global/Explore/DexTokens/DexTokens.module.css index 9b891e5a7f..44cdfba245 100644 --- a/src/components/Global/Explore/DexTokens/DexTokens.module.css +++ b/src/components/Global/Explore/DexTokens/DexTokens.module.css @@ -62,16 +62,18 @@ overflow-y: auto; /* Make only the content scrollable */ scrollbar-gutter: stable; /* This will keep the layout stable when the scrollbar appears */ - padding-right: 1rem; + overflow-x: hidden; + + padding-right: 4px; padding-bottom: 1rem; } .borderRight { height: 100%; - width: 2px; + width: 1px; position: absolute; background-color: var(--dark3); - right: 18px; + right: 6px; } .tokens { @@ -136,6 +138,20 @@ align-items: center; } +@media only screen and (min-width: 600px) { + .contentContainer{ + padding-right: 1rem; + overflow-x: auto; + } + + .borderRight { + width: 2px; + right: 18px; + } + + +} + @media only screen and (min-width: 768px) { .mainContainer { border: none; diff --git a/src/components/Global/Explore/PoolRow/PoolRow.module.css b/src/components/Global/Explore/PoolRow/PoolRow.module.css index 963096837b..f4d3dc0df4 100644 --- a/src/components/Global/Explore/PoolRow/PoolRow.module.css +++ b/src/components/Global/Explore/PoolRow/PoolRow.module.css @@ -104,3 +104,4 @@ } + diff --git a/src/components/Global/Explore/TopPools/TopPools.module.css b/src/components/Global/Explore/TopPools/TopPools.module.css index 32bd8cc373..0d29131ec6 100644 --- a/src/components/Global/Explore/TopPools/TopPools.module.css +++ b/src/components/Global/Explore/TopPools/TopPools.module.css @@ -66,17 +66,18 @@ ); /* Adjust this value based on your header's height */ overflow-y: auto; /* Make only the content scrollable */ scrollbar-gutter: stable; /* This will keep the layout stable when the scrollbar appears */ + overflow-x: hidden; - padding-right: 1rem; + padding-right: 4px; padding-bottom: 1rem; } .borderRight { height: 100%; - width: 2px; + width: 1px; position: absolute; background-color: var(--dark3); - right: 18px; + right: 6px; } .tokens { @@ -142,11 +143,26 @@ .no_results button:hover { color: var(--text2); } +@media only screen and (min-width: 600px) { + .contentContainer{ + padding-right: 1rem; + overflow-x: auto; + } + + .borderRight { + width: 2px; + right: 18px; + } + + +} @media only screen and (min-width: 768px) { .mainContainer { border: none; } + + .no_results { height: 70%; } diff --git a/src/components/Global/Modal/Modal.module.css b/src/components/Global/Modal/Modal.module.css index 312eb5acb2..2ade6a06a2 100644 --- a/src/components/Global/Modal/Modal.module.css +++ b/src/components/Global/Modal/Modal.module.css @@ -8,7 +8,7 @@ align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7); - z-index: 99999; + z-index: 99999999; background: rgba(1, 0, 16, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); @@ -16,6 +16,7 @@ -webkit-backdrop-filter: blur(15px); border-radius: var(--border-radius); transition: var(--transition); + } @@ -104,6 +105,7 @@ .outside_modal { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); + } .modal_body { bottom: 0; diff --git a/src/components/Global/NotificationCenter/NotificationCenter.module.css b/src/components/Global/NotificationCenter/NotificationCenter.module.css index e69de29bb2..981a39d301 100644 --- a/src/components/Global/NotificationCenter/NotificationCenter.module.css +++ b/src/components/Global/NotificationCenter/NotificationCenter.module.css @@ -0,0 +1,23 @@ +.container{ + position: relative; +} + +@media only screen and (max-width: 600px) { + .background_blur { + width: 100vw; + height: 100vh; + backdrop-filter: blur(10px); + + position: fixed; + top: 56px; + bottom: 64px; + left: 0; + right: 0; + z-index: 99999999; + pointer-events: none; + background-color: black; + + /* display: none; */ + } +} + diff --git a/src/components/Global/NotificationCenter/NotificationCenter.tsx b/src/components/Global/NotificationCenter/NotificationCenter.tsx index 466461b0ea..8feb6a87fa 100644 --- a/src/components/Global/NotificationCenter/NotificationCenter.tsx +++ b/src/components/Global/NotificationCenter/NotificationCenter.tsx @@ -1,20 +1,17 @@ import { AnimateSharedLayout } from 'framer-motion'; -import { useEffect, useRef, useState, useMemo, useContext } from 'react'; +import { useEffect, useRef, useState, useMemo, useContext, useCallback } from 'react'; import NotificationTable from './NotificationTable/NotificationTable'; import ActivityIndicator from './ActivityIndicator/ActivityIndicator'; -import UseOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import { getReceiptTxHashes } from '../../../ambient-utils/dataLayer'; import { ReceiptContext } from '../../../contexts/ReceiptContext'; -import Modal from '../Modal/Modal'; -import ModalHeader from '../ModalHeader/ModalHeader'; +import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import useMediaQuery from '../../../utils/hooks/useMediaQuery'; const NotificationCenter = () => { - - const showMobileVersion = useMediaQuery('(max-width: 768px)'); - const [showNotificationTable, setShowNotificationTable] = useState(false); + const smallScreen = useMediaQuery('(max-width: 768px)'); + const { pendingTransactions, sessionReceipts } = useContext(ReceiptContext); @@ -39,6 +36,7 @@ const NotificationCenter = () => { const activityCenterRef = useRef(null); const clickOutsideHandler = (event: Event) => { + if (smallScreen) return null if ( !activityCenterRef.current?.contains(event?.target as Node) && !notificationItemRef.current?.contains(event?.target as Node) @@ -49,22 +47,21 @@ const NotificationCenter = () => { setShowNotificationTable(false); } }; - UseOnClickOutside(activityCenterRef, clickOutsideHandler); - UseOnClickOutside(notificationItemRef, clickOutsideHandler); - const modalVersion = ( - setShowNotificationTable(false)}> - setShowNotificationTable(false)} /> - - - ) + const escFunction = useCallback((event: KeyboardEvent) => { + if (event.key === 'Escape') { + setShowNotificationTable(false); + } + }, [showNotificationTable]); - if ( showMobileVersion && showNotificationTable) return modalVersion + useEffect(() => { + document.addEventListener('keydown', escFunction, false); + return () => { + document.removeEventListener('keydown', escFunction, false); + }; + }, [escFunction]); + useOnClickOutside(activityCenterRef, clickOutsideHandler); + useOnClickOutside(notificationItemRef, clickOutsideHandler); return ( diff --git a/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx b/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx index 79345cdd1f..45ed9ef086 100644 --- a/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx +++ b/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx @@ -5,6 +5,9 @@ import styles from './NotificationTable.module.css'; import { FlexContainer } from '../../../../styled/Common'; import { ReceiptContext } from '../../../../contexts/ReceiptContext'; import { BrandContext } from '../../../../contexts/BrandContext'; +import Modal from '../../Modal/Modal'; +import ModalHeader from '../../ModalHeader/ModalHeader'; +import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; interface NotificationTableProps { showNotificationTable: boolean; @@ -14,10 +17,15 @@ interface NotificationTableProps { } const NotificationTable = (props: NotificationTableProps) => { - const { showNotificationTable, pendingTransactions, notificationItemRef } = - props; + const { + showNotificationTable, + pendingTransactions, + notificationItemRef, + setShowNotificationTable, + } = props; const { platformName } = useContext(BrandContext); + const showMobileVersion = useMediaQuery('(max-width: 768px)'); const { resetReceiptData, transactionsByType, sessionReceipts } = useContext(ReceiptContext); @@ -52,8 +60,7 @@ const NotificationTable = (props: NotificationTableProps) => { const isFuta = ['futa'].includes(platformName); - if (!showNotificationTable) return null; - return ( + const mainContent = (
{
); + const modalVersion = ( +
+ + setShowNotificationTable(false)} + > + setShowNotificationTable(false)} + /> + {mainContent} + +
+ ); + + if (!showNotificationTable) return null; + + return showMobileVersion ? modalVersion : mainContent }; export default NotificationTable; diff --git a/src/components/Global/NotificationCenter/ReceiptDisplay/ReceiptDisplay.tsx b/src/components/Global/NotificationCenter/ReceiptDisplay/ReceiptDisplay.tsx index 02201d46db..c539b49bfc 100644 --- a/src/components/Global/NotificationCenter/ReceiptDisplay/ReceiptDisplay.tsx +++ b/src/components/Global/NotificationCenter/ReceiptDisplay/ReceiptDisplay.tsx @@ -6,7 +6,6 @@ import { getChainExplorer, } from '../../../../ambient-utils/dataLayer'; import { RiExternalLinkLine } from 'react-icons/ri'; -import { motion } from 'framer-motion'; import { VscClose } from 'react-icons/vsc'; import { useContext, useEffect, useState } from 'react'; import { CrocEnvContext } from '../../../../contexts/CrocEnvContext'; @@ -103,15 +102,8 @@ export default function ReceiptDisplay(props: ReceiptDisplayPropsIF) { const ariaLabel = `${status} transaction of ${txType}`; return ( -
- + ); } diff --git a/src/components/Global/SnackbarComponent/SnackbarComponent.module.css b/src/components/Global/SnackbarComponent/SnackbarComponent.module.css index 030e2b1ce6..4a8817b6ac 100644 --- a/src/components/Global/SnackbarComponent/SnackbarComponent.module.css +++ b/src/components/Global/SnackbarComponent/SnackbarComponent.module.css @@ -10,7 +10,7 @@ bottom: 56px; - z-index: 10000000; + z-index: 9999999999999999999; font-size: 12px; border-top: 1px solid var(--text3); diff --git a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx index 2b7e81d46b..fc0a3b1871 100644 --- a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx +++ b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx @@ -87,7 +87,7 @@ function SnackbarComponent() { onClose={handleClose} anchorOrigin={anchorOrigin} // z-index needs to be greater than globalPopup - style={{ width: '900px', zIndex: 10000000 }} + style={{ width: '900px', zIndex: 99999999999 }} > Promise; - showSettings: boolean; - setShowSettings: Dispatch>; - showShareComponent: boolean; - setShowShareComponent: Dispatch>; - handleCopyAddress(): void; - onClose: () => void; -} - -export default function TransactionDetailsHeader( - props: TransactionDetailsHeaderPropsIF, -) { - const { - handleCopyAddress, - copyTransactionDetailsToClipboard, - showShareComponent, - setShowShareComponent, - onClose, - } = props; - - const isMobile = useMediaQuery('(max-width: 800px)'); - - const copyTxHashIconWithTooltip = ( - -
- -
- - ); - - const copyImageIconWithTooltip = ( - -
- -
- - ); - - return ( -
-
- ambient - ambient -
- - {isMobile ? ( -
-
- {!showShareComponent ? copyTxHashIconWithTooltip : null} - {showShareComponent ? copyImageIconWithTooltip : null} -
- -
-
- - -
- ) : ( -
- {!showShareComponent ? copyTxHashIconWithTooltip : null} - {showShareComponent ? copyImageIconWithTooltip : null} - - -
- -
-
- )} -
- ); -} diff --git a/src/components/Global/TransactionDetails/TransactionDetailsModal.module.css b/src/components/Global/TransactionDetails/TransactionDetailsModal.module.css index 26af515abc..bc7287daa7 100644 --- a/src/components/Global/TransactionDetails/TransactionDetailsModal.module.css +++ b/src/components/Global/TransactionDetails/TransactionDetailsModal.module.css @@ -69,8 +69,10 @@ .main_content { display: grid; - grid-template-rows: 1fr 0.9fr; + grid-template-rows: 1fr 0.6fr; } + + } @media only screen and (min-width: 768px) { diff --git a/src/components/Global/TransactionDetails/TransactionDetailsModal.tsx b/src/components/Global/TransactionDetails/TransactionDetailsModal.tsx index cda8cdb242..8b36d7e956 100644 --- a/src/components/Global/TransactionDetails/TransactionDetailsModal.tsx +++ b/src/components/Global/TransactionDetails/TransactionDetailsModal.tsx @@ -1,6 +1,5 @@ import styles from './TransactionDetailsModal.module.css'; import { useState, useRef, useContext, useEffect, memo } from 'react'; -import TransactionDetailsHeader from './TransactionDetailsHeader/TransactionDetailsHeader'; import TransactionDetailsPriceInfo from './TransactionDetailsPriceInfo/TransactionDetailsPriceInfo'; import TransactionDetailsGraph from './TransactionDetailsGraph/TransactionDetailsGraph'; import { TransactionIF, PositionServerIF } from '../../../ambient-utils/types'; @@ -20,6 +19,7 @@ import { import { TokenContext } from '../../../contexts/TokenContext'; import { CachedDataContext } from '../../../contexts/CachedDataContext'; import Modal from '../Modal/Modal'; +import DetailsHeader from '../DetailsHeader/DetailsHeader'; interface propsIF { tx: TransactionIF; @@ -113,7 +113,6 @@ function TransactionDetailsModal(props: propsIF) { chainId, ]); - const [showSettings, setShowSettings] = useState(false); const [showShareComponent, setShowShareComponent] = useState(true); const detailsRef = useRef(null); @@ -183,20 +182,20 @@ function TransactionDetailsModal(props: propsIF) { ); - const transactionDetailsHeaderProps = { - showSettings, - setShowSettings, - copyTransactionDetailsToClipboard, - setShowShareComponent, - showShareComponent, - handleCopyAddress, - onClose, - }; + return (
- + {showShareComponent ? ( shareComponent ) : ( diff --git a/src/components/GlobalModalPortal.tsx b/src/components/GlobalModalPortal.tsx index e1c4822693..21cdbd88fa 100644 --- a/src/components/GlobalModalPortal.tsx +++ b/src/components/GlobalModalPortal.tsx @@ -1,19 +1,19 @@ -import { ReactNode, useContext } from 'react'; +import { ReactNode, ReactPortal, useContext } from 'react'; import { createPortal } from 'react-dom'; import { GLOBAL_MODAL_PORTAL_ID } from '../ambient-utils/constants'; -import { BrandContext } from '../contexts/BrandContext'; +import { BrandContext, BrandContextIF } from '../contexts/BrandContext'; interface propsIF { children: ReactNode; } export default function GlobalModalPortal(props: propsIF) { - const { skin } = useContext(BrandContext); + const { skin } = useContext(BrandContext); const { children } = props; - const getGlobalModalPortal = (elem: ReactNode) => { + const getGlobalModalPortal = (elem: ReactNode): ReactPortal => { return createPortal( -
e.stopPropagation()} data-theme={skin}> +
e.stopPropagation()} data-theme={skin.active}> {elem}
, document.getElementById(GLOBAL_MODAL_PORTAL_ID) ?? document.body, diff --git a/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.module.css b/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.module.css deleted file mode 100644 index 8e620ac7b1..0000000000 --- a/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.container { - width: 100%; - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; - padding: 1rem; - cursor: default; - height: 60px; -} - -.logo_container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.logo { - height: 35px; - margin-left: 18px; -} - -.logo_text { - width: 176px; - margin-left: 10px; -} -.settings_control { - display: flex; - flex-direction: row; - - gap: 8px; - justify-content: center; -} - -.settings_control div { - cursor: pointer; -} - -.info_button { - cursor: pointer; - outline: none; - border: none; - background: var(--accent1); - border-radius: var(--border-radius); - width: 70px; - height: 25px; -} diff --git a/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.tsx b/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.tsx deleted file mode 100644 index fc3307e884..0000000000 --- a/src/components/OrderDetails/OrderDetailsHeader/OrderDetailsHeader.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import styles from './OrderDetailsHeader.module.css'; -import { Dispatch, SetStateAction } from 'react'; -import logo from '../../../assets/images/logos/logo_mark.svg'; -import logoText from '../../../assets/images/logos/logo_text.png'; - -import { FiCopy } from 'react-icons/fi'; -import { CgClose } from 'react-icons/cg'; -import IconWithTooltip from '../../Global/IconWithTooltip/IconWithTooltip'; - -interface OrderDetailsPropsIF { - copyOrderDetailsToClipboard: () => Promise; - showShareComponent: boolean; - setShowShareComponent: Dispatch>; - handleCopyPositionId(): void; - onClose: () => void; -} -export default function OrderDetailsHeader(props: OrderDetailsPropsIF) { - const { - handleCopyPositionId, - showShareComponent, - setShowShareComponent, - copyOrderDetailsToClipboard, - onClose, - } = props; - - const copySlotIDIconWithTooltip = ( - -
- -
- - ); - - const copyImageIconWithTooltip = ( - -
- -
- - ); - - return ( -
-
- ambient - ambient -
- -
- {!showShareComponent ? copySlotIDIconWithTooltip : null} - {showShareComponent ? copyImageIconWithTooltip : null} - - -
- -
-
-
- ); -} diff --git a/src/components/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx b/src/components/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx index c752c5613f..496d4f65f5 100644 --- a/src/components/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx +++ b/src/components/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx @@ -1,7 +1,6 @@ import { useState, useRef, useEffect, useContext } from 'react'; import styles from '../../../components/Global/TransactionDetails/TransactionDetailsModal.module.css'; -import OrderDetailsHeader from '../OrderDetailsHeader/OrderDetailsHeader'; import PriceInfo from '../PriceInfo/PriceInfo'; import { useProcessOrder } from '../../../utils/hooks/useProcessOrder'; import { LimitOrderIF, LimitOrderServerIF } from '../../../ambient-utils/types'; @@ -26,6 +25,7 @@ import modalBackground from '../../../assets/images/backgrounds/background.png'; import { CachedDataContext } from '../../../contexts/CachedDataContext'; import Modal from '../../Global/Modal/Modal'; import { UserDataContext } from '../../../contexts/UserDataContext'; +import DetailsHeader from '../../Global/DetailsHeader/DetailsHeader'; interface propsIF { limitOrder: LimitOrderIF; @@ -285,13 +285,16 @@ export default function OrderDetailsModal(props: propsIF) { return (
- + + {showShareComponent ? ( shareComponent ) : ( diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx index c042781ba2..ea3a54ec09 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx @@ -9,10 +9,22 @@ import { import { FiCopy, FiExternalLink } from 'react-icons/fi'; import { MdOutlineCloudDownload } from 'react-icons/md'; import { trimString } from '../../../../ambient-utils/dataLayer'; -import { AppStateContext, AppStateContextIF } from '../../../../contexts/AppStateContext'; -import { CrocEnvContext, CrocEnvContextIF } from '../../../../contexts/CrocEnvContext'; -import { TokenBalanceContext, TokenBalanceContextIF } from '../../../../contexts/TokenBalanceContext'; -import { UserDataContext, UserDataContextIF } from '../../../../contexts/UserDataContext'; +import { + AppStateContext, + AppStateContextIF, +} from '../../../../contexts/AppStateContext'; +import { + CrocEnvContext, + CrocEnvContextIF, +} from '../../../../contexts/CrocEnvContext'; +import { + TokenBalanceContext, + TokenBalanceContextIF, +} from '../../../../contexts/TokenBalanceContext'; +import { + UserDataContext, + UserDataContextIF, +} from '../../../../contexts/UserDataContext'; import styles from './PortfolioBannerAccount.module.css'; import useCopyToClipboard from '../../../../utils/hooks/useCopyToClipboard'; @@ -28,12 +40,12 @@ interface propsIF { jazziconsToDisplay: JSX.Element | null; connectedAccountActive: boolean; showTabsAndNotExchange: boolean; - setShowTabsAndNotExchange: Dispatch> + setShowTabsAndNotExchange: Dispatch>; nftTestWalletInput: string; setNftTestWalletInput: Dispatch>; showNFTPage: boolean; setShowNFTPage: Dispatch>; - // eslint-disable-next-line + // eslint-disable-next-line handleTestWalletChange: any; } @@ -58,6 +70,7 @@ export default function PortfolioBannerAccount(props: propsIF) { userProfileNFT, setUserProfileNFT, setUserThumbnailNFT, + isUserConnected, } = useContext(UserDataContext); const { NFTData } = useContext(TokenBalanceContext); @@ -72,15 +85,17 @@ export default function PortfolioBannerAccount(props: propsIF) { const isSmallScreen: boolean = useMediaQuery('(max-width: 768px)'); - const [showAccountDetails, setShowAccountDetails] = useState(false); + const [showAccountDetails, setShowAccountDetails] = + useState(false); - const ensNameToDisplay: string = ensName !== '' ? ensName : truncatedAccountAddress; + const ensNameToDisplay: string = + ensName !== '' ? ensName : truncatedAccountAddress; const addressToDisplay: string | undefined = resolvedAddress ? resolvedAddress : ensNameAvailable - ? truncatedAccountAddress - : userAddress; + ? truncatedAccountAddress + : userAddress; const [_, copy] = useCopyToClipboard(); @@ -139,7 +154,8 @@ export default function PortfolioBannerAccount(props: propsIF) { } // Nft Fetch For Test Wallet - const [isWalletPanelActive, setIsWalletPanelActive] = useState(false); + const [isWalletPanelActive, setIsWalletPanelActive] = + useState(false); // functionality to show panel for NFT test fetch useEffect(() => { @@ -150,7 +166,10 @@ export default function PortfolioBannerAccount(props: propsIF) { } } document.body.addEventListener('keydown', openWalletAddressPanel); - return document.body.removeEventListener('keydown', openWalletAddressPanel); + return document.body.removeEventListener( + 'keydown', + openWalletAddressPanel, + ); }, []); return ( @@ -179,8 +198,8 @@ export default function PortfolioBannerAccount(props: propsIF) { resolvedAddress ? resolvedAddress : userAddress - ? userAddress - : '', + ? userAddress + : '', userProfileNFT, 65, resolvedAddress !== undefined && @@ -204,7 +223,9 @@ export default function PortfolioBannerAccount(props: propsIF) { className={styles.address_detail} onClick={handleCopyAddress} > - {addressToDisplay && addressToDisplay.length > 8 ? trimString(addressToDisplay, 5, 3) : addressToDisplay} + {addressToDisplay && addressToDisplay.length > 8 + ? trimString(addressToDisplay, 5, 3) + : addressToDisplay} {addressToDisplay ? : null} {addressToDisplay ? (
- {isSmallScreen && connectedAccountActive && ( + {isSmallScreen && isUserConnected && ( )}
diff --git a/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.module.css b/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.module.css deleted file mode 100644 index 65db77f38a..0000000000 --- a/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.container { - width: 100%; - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; - padding: 1rem; - cursor: default; - - height: 60px; -} -.logo_container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.logo { - height: 35px; - margin-left: 18px; -} - -.logo_text { - width: 176px; - margin-left: 10px; -} -.settings_control { - display: flex; - flex-direction: row; - - gap: 8px; - justify-content: center; -} - -.settings_control div { - cursor: pointer; -} - -.info_button { - outline: none; - border: none; - background: var(--accent1); - border-radius: var(--border-radius); - width: 70px; - height: 25px; - cursor: pointer; -} diff --git a/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.tsx b/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.tsx deleted file mode 100644 index 49377f63a0..0000000000 --- a/src/components/RangeDetails/RangeDetailsHeader/RangeDetailsHeader.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import styles from './RangeDetailsHeader.module.css'; -import logo from '../../../assets/images/logos/logo_mark.svg'; -import logoText from '../../../assets/images/logos/logo_text.png'; - -import { FiCopy } from 'react-icons/fi'; -import { CgClose } from 'react-icons/cg'; -import { Dispatch, SetStateAction } from 'react'; -import IconWithTooltip from '../../Global/IconWithTooltip/IconWithTooltip'; - -interface RangeDetailsPropsIF { - onClose: () => void; - copyRangeDetailsToClipboard: () => Promise; - showShareComponent: boolean; - setShowShareComponent: Dispatch>; - handleCopyPositionId(): void; -} -export default function RangeDetailsHeader(props: RangeDetailsPropsIF) { - const { - onClose, - handleCopyPositionId, - copyRangeDetailsToClipboard, - showShareComponent, - setShowShareComponent, - } = props; - - const copySlotIDIconWithTooltip = ( - -
- -
- - ); - - const copyImageIconWithTooltip = ( - -
- -
- - ); - - return ( -
-
- ambient - ambient -
- -
- {!showShareComponent ? copySlotIDIconWithTooltip : null} - {showShareComponent ? copyImageIconWithTooltip : null} - - -
- -
-
-
- ); -} diff --git a/src/components/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx b/src/components/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx index b58d36073c..f058ecb2d7 100644 --- a/src/components/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx +++ b/src/components/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx @@ -6,7 +6,6 @@ import { BlastRewardsDataIF, PositionServerIF, } from '../../../ambient-utils/types'; -import RangeDetailsHeader from '.././RangeDetailsHeader/RangeDetailsHeader'; import RangeDetailsSimplify from '.././RangeDetailsSimplify/RangeDetailsSimplify'; import TransactionDetailsGraph from '../../Global/TransactionDetails/TransactionDetailsGraph/TransactionDetailsGraph'; import { useProcessRange } from '../../../utils/hooks/useProcessRange'; @@ -37,6 +36,7 @@ import { toDisplayPrice, } from '@crocswap-libs/sdk'; import { fetchPositionRewardsData } from '../../../ambient-utils/api/fetchPositionRewards'; +import DetailsHeader from '../../Global/DetailsHeader/DetailsHeader'; interface propsIF { position: PositionIF; @@ -500,13 +500,16 @@ function RangeDetailsModal(props: propsIF) { return (
- + + {showShareComponent ? ( shareComponent ) : ( diff --git a/src/contexts/BrandContext.tsx b/src/contexts/BrandContext.tsx index 618007f1e0..65a144a7cb 100644 --- a/src/contexts/BrandContext.tsx +++ b/src/contexts/BrandContext.tsx @@ -1,4 +1,10 @@ -import { ReactNode, createContext, useContext, useMemo } from 'react'; +import { + ReactNode, + createContext, + useContext, + useMemo, + useState, +} from 'react'; import { skins } from '../App/hooks/useSkin'; import { brandIF, fontSets, heroItem } from '../assets/branding/types'; import { TradeDataContext } from './TradeDataContext'; @@ -10,6 +16,7 @@ import { ambientProductionBrandAssets, ambientTestnetBrandAssets, futaBrandAssets, + sampleBrandAssets, } from '../assets/branding'; import { UserDataContext } from './UserDataContext'; @@ -21,7 +28,11 @@ const PREMIUM_THEMES_IN_ENV = { type premiumThemes = keyof typeof PREMIUM_THEMES_IN_ENV; export interface BrandContextIF { - skin: skins; + skin: { + active: skins; + available: skins[]; + set: (s: skins) => void; + }; fontSet: fontSets; colorAndFont: string; platformName: string; @@ -62,6 +73,8 @@ export const BrandContextProvider = (props: { children: ReactNode }) => { // TODO: add error handling if dev puts a value in `.env` not matching defined cases const brand: string = import.meta.env.VITE_BRAND_ASSET_SET ?? ''; const brandAssets = useMemo(() => { + // make the linter happy for sample file + false && sampleBrandAssets; switch (brand) { case 'blast': return blastBrandAssets; @@ -78,17 +91,30 @@ export const BrandContextProvider = (props: { children: ReactNode }) => { } }, [brand]); - // hook to manage the active color theme in the app - // const skin: skinMethodsIF = useSkin( - // brandAssets.color, - // chainData.chainId as chainIds, - // ); + // this is for testing premium-access features + const emilyAddr = '0x8a8b00B332c5eD50466e31FCCdd4dc2170b4F78f'; + const benAddr = '0xE09de95d2A8A73aA4bFa6f118Cd1dcb3c64910Dc'; + const premiumTheme1: string[] = [ + emilyAddr.toLowerCase(), + benAddr.toLowerCase(), + ]; - function getSkin(): skins { - const networkPrefs = + const [skin, setSkin] = useState(getDefaultSkin()); + + function getAvailableSkins(): skins[] { + const networkSettings = brandAssets.networks[chainData.chainId as chainIds]; - return networkPrefs ? networkPrefs.color : 'purple_dark'; - // return premiumAccess.get('theme1') ? 'futa_dark' : 'purple_dark'; + const available: skins[] = networkSettings?.color ?? ['purple_dark']; + const premium: skins[] = networkSettings?.premiumColor ?? []; + const hasPremium = !!( + userAddress && premiumTheme1.includes(userAddress.toLowerCase()) + ); + return hasPremium ? available : available.concat(premium); + } + + function getDefaultSkin(): skins { + const defaultSkin: skins[] = getAvailableSkins(); + return defaultSkin[0]; } function getHero(): heroItem[] { @@ -97,13 +123,17 @@ export const BrandContextProvider = (props: { children: ReactNode }) => { return networkPrefs ? networkPrefs.hero : [{ content: 'ambient', processAs: 'separator' }]; - } + }; // data to be returned to the app const brandData: BrandContextIF = { - skin: getSkin(), + skin: { + active: skin, + available: getAvailableSkins(), + set: (s: skins) => setSkin(s), + }, fontSet: brandAssets.fontSet, - colorAndFont: getSkin() + '+' + brandAssets.fontSet, + colorAndFont: getDefaultSkin() + '+' + brandAssets.fontSet, platformName: brandAssets.platformName, networks: Object.keys(brandAssets.networks) as chainIds[], headerImage: brandAssets.headerImage, diff --git a/src/contexts/ChainDataContext.tsx b/src/contexts/ChainDataContext.tsx index e33c01d24a..2780ce3ad7 100644 --- a/src/contexts/ChainDataContext.tsx +++ b/src/contexts/ChainDataContext.tsx @@ -8,7 +8,6 @@ import React, { } from 'react'; import useWebSocket from 'react-use-websocket'; import { - ALCHEMY_API_KEY, BLOCK_POLLING_RPC_URL, IS_LOCAL_ENV, MAINNET_RPC_URL, @@ -44,7 +43,6 @@ import { import { BLAST_RPC_URL } from '../ambient-utils/constants/networks/blastNetwork'; import { AppStateContext } from './AppStateContext'; import moment from 'moment'; -import { Network, Alchemy } from 'alchemy-sdk'; import { fetchNFT } from '../ambient-utils/api/fetchNft'; import { ReceiptContext } from './ReceiptContext'; @@ -127,13 +125,6 @@ export const ChainDataContextProvider = (props: { '0x8274f', ]; - const settings = { - apiKey: ALCHEMY_API_KEY, - network: Network.ETH_MAINNET, - }; - - const alchemyClient = new Alchemy(settings); - // boolean representing whether the active network is an L2 const isActiveNetworkL2: boolean = L2_NETWORKS.includes(chainData.chainId); @@ -283,8 +274,7 @@ export const ChainDataContextProvider = (props: { crocEnv && isUserConnected && userAddress && - chainData.chainId && - alchemyClient + chainData.chainId ) { try { const fetchFunction = isfetchNftTriggered @@ -296,7 +286,6 @@ export const ChainDataContextProvider = (props: { ? nftTestWalletAddress : userAddress, crocEnv, - alchemyClient, NFTFetchSettings.pageKey, NFTFetchSettings.pageSize, ); @@ -380,7 +369,6 @@ export const ChainDataContextProvider = (props: { userAddress, chainData.chainId, // everyFiveMinutes, - alchemyClient !== undefined, activeNetwork.graphCacheUrl, isfetchNftTriggered, ]); diff --git a/src/contexts/ChartContext.tsx b/src/contexts/ChartContext.tsx index 36d6675e26..4bdd710c4c 100644 --- a/src/contexts/ChartContext.tsx +++ b/src/contexts/ChartContext.tsx @@ -24,12 +24,8 @@ import { useUndoRedo, } from '../pages/platformAmbient/Chart/ChartUtils/useUndoRedo'; import { TradeDataContext, TradeDataContextIF } from './TradeDataContext'; -import { - drawDataHistory, - getCssVariable, - selectedDrawnData, -} from '../pages/platformAmbient/Chart/ChartUtils/chartUtils'; import { BrandContext } from './BrandContext'; +import { drawDataHistory, selectedDrawnData, getCssVariable } from '../pages/platformAmbient/Chart/ChartUtils/chartUtils'; type TradeTableState = 'Expanded' | 'Collapsed' | undefined; @@ -463,48 +459,47 @@ export const ChartContextProvider = (props: { children: React.ReactNode }) => { const upCandleBodyColor = contextChartColors && contextChartColors.upCandleBodyColor ? d3.color(contextChartColors.upCandleBodyColor) - : getCssVariable(skin, '--accent5'); + : getCssVariable(skin.active, '--accent5'); const downCandleBodyColor = contextChartColors && contextChartColors.downCandleBodyColor ? d3.color(contextChartColors.downCandleBodyColor) - : getCssVariable(skin, '--dark2'); + : getCssVariable(skin.active, '--dark2'); const selectedDateFillColor = contextChartColors && contextChartColors.selectedDateFillColor ? d3.color(contextChartColors.selectedDateFillColor) - : getCssVariable(skin, '--accent2'); - + : getCssVariable(skin.active, '--accent2'); const downCandleBorderColor = contextChartColors && contextChartColors.downCandleBorderColor ? d3.color(contextChartColors.downCandleBorderColor) - : getCssVariable(skin, '--accent1'); + : getCssVariable(skin.active, '--accent1'); const upCandleBorderColor = contextChartColors && contextChartColors.upCandleBorderColor ? d3.color(contextChartColors.upCandleBorderColor) - : getCssVariable(skin, '--accent5'); + : getCssVariable(skin.active, '--accent5'); const liqAskColor = contextChartColors && contextChartColors.liqAskColor ? d3.color(contextChartColors.liqAskColor) - : getCssVariable(skin, '--accent5'); + : getCssVariable(skin.active, '--accent5'); const liqBidColor = contextChartColors && contextChartColors.liqBidColor ? d3.color(contextChartColors.liqBidColor) - : getCssVariable(skin, '--accent1'); + : getCssVariable(skin.active, '--accent1'); const selectedDateStrokeColor = contextChartColors && contextChartColors.selectedDateStrokeColor ? d3.color(contextChartColors.selectedDateStrokeColor) - : getCssVariable(skin, '--accent2'); + : getCssVariable(skin.active, '--accent2'); const drawngShapeDefaultColor = contextChartColors && contextChartColors.drawngShapeDefaultColor ? d3.color(contextChartColors.drawngShapeDefaultColor) - : getCssVariable(skin, '--accent1'); + : getCssVariable(skin.active, '--accent1'); - const text2 = getCssVariable(skin, '--text2'); - const accent3 = getCssVariable(skin, '--accent3'); - const accent1 = getCssVariable(skin, '--accent1'); - const dark1 = getCssVariable(skin, '--dark1'); + const text2 = getCssVariable(skin.active, '--text2'); + const accent3 = getCssVariable(skin.active, '--accent3'); + const accent1 = getCssVariable(skin.active, '--accent1'); + const dark1 = getCssVariable(skin.active, '--dark1'); const chartThemeColors = { upCandleBodyColor: upCandleBodyColor, @@ -526,7 +521,7 @@ export const ChartContextProvider = (props: { children: React.ReactNode }) => { }; setChartThemeColors(() => chartThemeColors); - }, [skin]); + }, [skin.active]); return ( diff --git a/src/contexts/UserPreferenceContext.tsx b/src/contexts/UserPreferenceContext.tsx index fa959835e7..6bd204e07a 100644 --- a/src/contexts/UserPreferenceContext.tsx +++ b/src/contexts/UserPreferenceContext.tsx @@ -24,6 +24,10 @@ interface UserPreferenceIF { bypassConfirmLimit: skipConfirmIF; bypassConfirmRange: skipConfirmIF; bypassConfirmRepo: skipConfirmIF; + cssDebug: { + cache: (k: string, v: string) => void; + check: (k: string) => string|undefined; + }; } export const UserPreferenceContext = createContext( @@ -44,29 +48,6 @@ export const UserPreferenceContextProvider = (props: { const { tokenA, tokenB, setDenomInBase, isDenomBase, didUserFlipDenom } = useContext(TradeDataContext); - const userPreferencesProps = { - favePools: useFavePools(), - swapSlippage: useSlippage('swap'), - mintSlippage: useSlippage('mint'), - repoSlippage: useSlippage('repo'), - dexBalSwap: useExchangePrefs('swap'), - dexBalLimit: useExchangePrefs('limit'), - dexBalRange: useExchangePrefs('range'), - bypassConfirmSwap: useSkipConfirm('swap'), - bypassConfirmLimit: useSkipConfirm('limit'), - bypassConfirmRange: useSkipConfirm('range'), - bypassConfirmRepo: useSkipConfirm('repo'), - }; - - // Memoize the object being passed to context. This assumes that all of the individual top-level values - // in the userPreferencesProps object are themselves correctly memo-ized at the object level. E.g. the - // value from `useSlippage()` or `useSkipConfirm()` should be a new object reference if and only if their - // content needs to be updated - const userPreferences = useMemo( - () => userPreferencesProps, - [...Object.values(userPreferencesProps)], - ); - const isBaseTokenMoneynessGreaterOrEqual: boolean = useMemo(() => { if (baseTokenAddress && quoteTokenAddress) { return ( @@ -111,6 +92,42 @@ export const UserPreferenceContextProvider = (props: { ]); /* ------------------------------------------ END USER PREFERENCES CONTEXT ------------------------------------------ */ + + const cssDebugMap = new Map(); + function cacheCSSProperty(k: string, v: string): void { + cssDebugMap.set(k, v); + } + function checkCSSPropertyCache(k: string): string|undefined { + return cssDebugMap.get(k); + } + + const userPreferencesProps: UserPreferenceIF = { + favePools: useFavePools(), + swapSlippage: useSlippage('swap'), + mintSlippage: useSlippage('mint'), + repoSlippage: useSlippage('repo'), + dexBalSwap: useExchangePrefs('swap'), + dexBalLimit: useExchangePrefs('limit'), + dexBalRange: useExchangePrefs('range'), + bypassConfirmSwap: useSkipConfirm('swap'), + bypassConfirmLimit: useSkipConfirm('limit'), + bypassConfirmRange: useSkipConfirm('range'), + bypassConfirmRepo: useSkipConfirm('repo'), + cssDebug: { + cache: cacheCSSProperty, + check: checkCSSPropertyCache, + } + }; + + // Memoize the object being passed to context. This assumes that all of the individual top-level values + // in the userPreferencesProps object are themselves correctly memo-ized at the object level. E.g. the + // value from `useSlippage()` or `useSkipConfirm()` should be a new object reference if and only if their + // content needs to be updated + const userPreferences = useMemo( + () => userPreferencesProps, + [...Object.values(userPreferencesProps)], + ); + return ( {props.children} diff --git a/src/index.css b/src/index.css index 2cc1f9ba20..ca098fd947 100644 --- a/src/index.css +++ b/src/index.css @@ -2,9 +2,6 @@ @import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;500&display=swap'); - -@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap'); - @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); /* For simple theme change(special occasion), change portfolio and swap background. No need for a different color scheme*/ @@ -66,7 +63,8 @@ --swap-border: var(--title-gradient); --grey-light-border: 1px solid var(--text2); --navbar-border: transparent; - --dark-border: 0.2px solid #010101; + --dark-border-color: #010101; + --dark-border: 0.2px solid var(--dark-border-color); /* transitions */ --transition: all var(--animation-speed) ease-in-out; @@ -78,8 +76,15 @@ --footer-height: 24px; /* gradients, shadows */ - --shimmer: linear-gradient(to right, #141e30, #243b55); - --gradient-box-shadow: 0px 0px 20px 0px rgba(115, 113, 252, 0.25) inset; + --shimmer-start-color: #141E30; + --shimmer-end-color: #243b55; + --shimmer: linear-gradient( + to right, + var(--shimmer-start-color), + var(--shimmer-end-color) + ); + --gradient-box-shadow-color: rgba(115, 113, 252, 0.25); + --gradient-box-shadow: 0px 0px 20px 0px var(--gradient-box-shadow-color) inset; --title-gradient: linear-gradient( 90deg, @@ -236,10 +241,10 @@ /* sizes */ --footer-height: 24px; - --font-logo: 'Fira Mono', monospace; - --font-family: 'Fira Mono', monospace; - --roboto: 'Fira Mono', monospace; - --mono: 'Fira Mono', monospace; + --font-logo: 'Fira Mono'; + --font-family: 'Fira Mono'; + --roboto: 'Fira Mono'; + --mono: 'Fira Mono'; --scrollbar: none; --scrollbar-track: transparent; diff --git a/src/pages/Chart/ChartSettings/ChartSettings.tsx b/src/pages/Chart/ChartSettings/ChartSettings.tsx index 9bf379ab35..d9cfe6f338 100644 --- a/src/pages/Chart/ChartSettings/ChartSettings.tsx +++ b/src/pages/Chart/ChartSettings/ChartSettings.tsx @@ -206,48 +206,48 @@ export default function ChartSettings(props: ContextMenuIF) { ); const upCandleBodyColor = isDefault - ? getCssVariable(skin, chartSettings.chartColors.upCandleBodyColor) + ? getCssVariable(skin.active, chartSettings.chartColors.upCandleBodyColor) : d3.color(chartSettings.chartColors.upCandleBodyColor); const downCandleBodyColor = isDefault ? getCssVariable( - skin, + skin.active, chartSettings.chartColors.downCandleBodyColor, ) : d3.color(chartSettings.chartColors.downCandleBodyColor); const selectedDateFillColor = isDefault ? getCssVariable( - skin, + skin.active, chartSettings.chartColors.selectedDateFillColor, ) : d3.color(chartSettings.chartColors.selectedDateFillColor); const downCandleBorderColor = isDefault ? getCssVariable( - skin, + skin.active, chartSettings.chartColors.downCandleBorderColor, ) : d3.color(chartSettings.chartColors.downCandleBorderColor); const upCandleBorderColor = isDefault ? getCssVariable( - skin, + skin.active, chartSettings.chartColors.upCandleBorderColor, ) : d3.color(chartSettings.chartColors.upCandleBorderColor); const liqAskColor = isDefault - ? getCssVariable(skin, chartSettings.chartColors.liqAskColor) + ? getCssVariable(skin.active, chartSettings.chartColors.liqAskColor) : d3.color(chartSettings.chartColors.liqAskColor); const liqBidColor = isDefault - ? getCssVariable(skin, chartSettings.chartColors.liqBidColor) + ? getCssVariable(skin.active, chartSettings.chartColors.liqBidColor) : d3.color(chartSettings.chartColors.liqBidColor); const selectedDateStrokeColor = isDefault ? getCssVariable( - skin, + skin.active, chartSettings.chartColors.selectedDateStrokeColor, ) : d3.color(chartSettings.chartColors.selectedDateStrokeColor); diff --git a/src/pages/Explore/Explore.module.css b/src/pages/Explore/Explore.module.css deleted file mode 100644 index 27a2eab017..0000000000 --- a/src/pages/Explore/Explore.module.css +++ /dev/null @@ -1,282 +0,0 @@ -.main_container { - background: var(--dark2); - padding: 16px; - display: flex; - flex-direction: column; - gap: 16px; - height: calc(100vh - 64px); - -} - -/* .main_wrapper{ - font-size: var(--header1-size); - line-height: var(--header1-lh); - color: var(--text1); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 4px; - user-select: none; - - -} */ - - - -.options_wrapper{ - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 4px; - user-select: none; -} - -.options_content{ - display: flex; - - flex-direction: row; - align-items: center; - gap: 12px; - - - - -} -.title_text{ - font-size: var(--header1-lh); -} - -.refresh_container{ - display: flex; - flex-direction: row; - align-items: center; - font-size: var(--body-size); - font-style: italic; - color: var(--text1); - gap: 8px; -} - -.refresh_button{ - width: 30px; - height: 30px; - display: flex; - justify-content: center; - align-items: center; - background-color: var(--dark3); - border-radius: var(--border-radius); - border: none; - outline: none; -} -.input_container { - display: flex; - height: 30px; - padding: 0 4px; - justify-content: center; - align-items: center; - gap: 4px; - flex: 1 0 0; - border-radius: 4px; - background: var(--dark2, #12121A); - - width: 300px; - border: 1px solid var(--dark3); -} - -.input_wrapper { - display: flex; - align-items: center; - width: 100%; - - -} - -.input { - width: 100%; - height: 100%; - border: none; - outline: none; - background: transparent; - color: var(--text-text2, #8B98A5); - font-family: "Lexend Deca", sans-serif; - font-size: 12px; - font-weight: 300; - line-height: normal; - padding-left: 24px; /* Adjust if necessary based on the icon's width */ -} - -.input::placeholder { - color: var(--text-text2, #8B98A5); -} - -.input_wrapper::before { - content: url('path/to/your/icon.svg'); /* Replace with your actual icon path */ - display: inline-block; - margin-left: 8px; - margin-right: 8px; -} - -@media (max-width: 768px) { - - .main_container{ - background: var(--dark1); - height: calc(100vh - 120px); - - - } - .title_text { - font-size: var(--header1-size); - } - .options_wrapper{ - flex-direction: column; - } - - .options_content{ - width: 100%; - - display: grid; - grid-template-columns: 1fr 30px 30px; - gap: 4px; - } - - .pools_options_content{ - grid-template-columns: 1fr 30px !important; - - } - - .title_text{ - display: none; - } - - .input_container{ - width: 100%; - background: var(--dark2) - } -} - -@media (max-width: 480px) { - .title_text { - font-size: 20px; - } -} - - - -/* ----------------------------------- */ -.myContainer{ - box-sizing: border-box; - width: 100%; - height: 100%; - - /* max-width: 1500px; */ - margin: auto; - /* border: 1px solid var(--dark3); */ - border-radius: 4px; - /* padding: 8px; */ - overflow-x: auto; - position: relative; - - /* height: calc(100vh - 64px); */ - overflow-y: hidden; - -} - -.gridContainer{ - box-sizing: border-box; - width: 100%; - - display: flex; - flex-direction: row; - align-items: center; - min-width: 100%; - min-height: 64px; - - gap: 4px; - - overflow-x: auto; - white-space: nowrap; - /* because this is the header */ - - padding-right: 1rem; - - - position: sticky; - top: 0; - z-index: 100; - - -} - -.gridItem{ - box-sizing: border-box; - display: flex; - flex-grow: 1; - /* background: var(--dark2); */ - flex-shrink: 0; - min-width: 0; - min-height: 0; - align-items: stretch; - - /* width: 133px; */ - - padding: 0 8px; - font-size: 12px; - width: 60px; - /* justify-content: center; */ - - - - -} -.contentContainer { - height: calc(100% - 64px); /* Adjust this value based on your header's height */ - overflow-y: auto; /* Make only the content scrollable */ - scrollbar-gutter: stable; /* This will keep the layout stable when the scrollbar appears */ - -} - -.tokens{ - width: 100%; - display: flex; - /* justify-content: flex-start !important; */ -} - - -.tradeButton{ - width: 25px; - -} - - - .poolName{ - /* justify-content: flex-start !important; */ - width: 30px; - - -} - -@media only screen and (min-width: 768px) { - - .gridContainer{ - gap: 8px; - } - - -.gridItem{ - font-size: 16px; - width: 70px; - justify-content: flex-end; - - -} - -.tradeButton, .poolName{ - width: 70px; - } -} - -@media only screen and (min-width: 1024px) { - .gridItem, .tradeButton, .tradeButton, .poolName{ - width: 133px; - } - -} \ No newline at end of file diff --git a/src/pages/common/CSSDebug/CSSDebug.module.css b/src/pages/common/CSSDebug/CSSDebug.module.css new file mode 100644 index 0000000000..4cfcad66b2 --- /dev/null +++ b/src/pages/common/CSSDebug/CSSDebug.module.css @@ -0,0 +1,6 @@ +.css_debug { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 20px; +} diff --git a/src/pages/common/CSSDebug/CSSDebug.tsx b/src/pages/common/CSSDebug/CSSDebug.tsx new file mode 100644 index 0000000000..6ff09cd995 --- /dev/null +++ b/src/pages/common/CSSDebug/CSSDebug.tsx @@ -0,0 +1,140 @@ +import { useContext, useState } from 'react'; +import Swap from '../../platformAmbient/Swap/Swap'; +import styles from './CSSDebug.module.css'; +import ColorToggle from './ColorToggle'; +import { skins } from '../../../App/hooks/useSkin'; +import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext'; + +export type colorFormats = 'text'|'background'|'border'; + +export interface cssColorIF { + name: string; + format: colorFormats; +} + +const textColors: cssColorIF[] = [ + { name: '--text1', format: 'text' }, + { name: '--text2', format: 'text' }, + { name: '--text3', format: 'text' }, + { name: '--accent1', format: 'text' }, + { name: '--accent2', format: 'text' }, + { name: '--accent3', format: 'text' }, + { name: '--accent4', format: 'text' }, + { name: '--accent5', format: 'text' }, + { name: '--positive', format: 'text' }, + { name: '--negative', format: 'text' }, + { name: '--other-green', format: 'text' }, + { name: '--other-red', format: 'text' }, +]; + +const backgroundColors: cssColorIF[] = [ + { name: '--dark1', format: 'background' }, + { name: '--dark2', format: 'background' }, + { name: '--dark3', format: 'background' }, + { name: '--dark4', format: 'background' }, +]; + +const borderColors: cssColorIF[] = [ + { name: '--border', format: 'border' }, + { name: '--dark-border-color', format: 'border' }, +]; + +export interface allColorsIF { + text: cssColorIF[]; + background: cssColorIF[]; + border: cssColorIF[]; +} + +const allColors: allColorsIF = { + text: textColors, + background: backgroundColors, + border: borderColors, +}; + +interface propsIF { + noSwap?: boolean; +} + +export default function CSSDebug(props: propsIF) { + const { noSwap } = props; + const { skin } = useContext(BrandContext); + const SAMPLE_TEXT = 'Zero-to-One Decentralized Trading Protocol'; + const [sampleText, setSampleText] = useState(SAMPLE_TEXT); + + return ( + <> + {} + + setSampleText(e.target.value)} + /> +
+ { + textColors.map( + (c: cssColorIF) => ( + + ) + ) + } + { + backgroundColors.map( + (c: cssColorIF) => ( + + ) + ) + } + { + borderColors.map( + (c: cssColorIF) => ( + + ) + ) + } +
+ {noSwap || } + + ); +} diff --git a/src/pages/common/CSSDebug/CSSModal.module.css b/src/pages/common/CSSDebug/CSSModal.module.css new file mode 100644 index 0000000000..31aae3745d --- /dev/null +++ b/src/pages/common/CSSDebug/CSSModal.module.css @@ -0,0 +1,16 @@ +.css_modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50%; + max-width: 800px; + height: auto; + max-height: 80%; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + z-index: 1000; + overflow: scroll; +} \ No newline at end of file diff --git a/src/pages/common/CSSDebug/CSSModal.tsx b/src/pages/common/CSSDebug/CSSModal.tsx new file mode 100644 index 0000000000..296ac550e9 --- /dev/null +++ b/src/pages/common/CSSDebug/CSSModal.tsx @@ -0,0 +1,16 @@ +import CSSDebug from './CSSDebug'; +import styles from './CSSModal.module.css'; + +interface propsIF { + close: () => void; +} + +export default function CSSModal(props: propsIF) { + const { close } = props; + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/pages/common/CSSDebug/ColorToggle.module.css b/src/pages/common/CSSDebug/ColorToggle.module.css new file mode 100644 index 0000000000..0c743d50de --- /dev/null +++ b/src/pages/common/CSSDebug/ColorToggle.module.css @@ -0,0 +1,23 @@ +.color_toggle { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin: 8px; + padding: 4px; + gap: 6px; + outline: 1px solid yellow; + color: antiquewhite; + background-color: grey; +} + +.toggle_area > header { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; +} + +.color_box { + height: 100%; + aspect-ratio: 1; +} diff --git a/src/pages/common/CSSDebug/ColorToggle.tsx b/src/pages/common/CSSDebug/ColorToggle.tsx new file mode 100644 index 0000000000..3a71a79749 --- /dev/null +++ b/src/pages/common/CSSDebug/ColorToggle.tsx @@ -0,0 +1,96 @@ +import { useContext, useRef, useState } from 'react'; +import { ColorResult, SketchPicker } from 'react-color'; +import styles from './ColorToggle.module.css'; +import { allColorsIF, cssColorIF } from './CSSDebug'; +import { RxReset } from 'react-icons/rx'; +import { UserPreferenceContext } from '../../../contexts'; + +interface propsIF { + cssProperty: cssColorIF; + sampleText: string; + allColors: allColorsIF; +} + +export default function ColorToggle(props: propsIF) { + const { cssProperty, sampleText, allColors } = props; + + const { cssDebug } = useContext(UserPreferenceContext); + + const [color, setColor] = useState(getCssCustomPropertyValue(cssProperty.name)); + + function getCssCustomPropertyValue(p: string): string { + const cached: string|undefined = cssDebug.check(p); + const root: HTMLElement = document.documentElement; + const value: string = getComputedStyle(root).getPropertyValue(p).trim(); + return cached ?? value; + } + + function handleChange(c: string): void { + cssDebug.cache(cssProperty.name, c); + setColor(c); + document.documentElement.style.setProperty(cssProperty.name, c); + } + + const originalColor = useRef(getCssCustomPropertyValue(cssProperty.name)); + + return ( +
+
+
+

Toggle {cssProperty.name}

+ handleChange(originalColor.current)}/> +
+ handleChange(color.hex)} + /> +
+
+ { + cssProperty.format === 'text' && ( + allColors.background.map(( + (c: cssColorIF) => ( +
+
On {c.name}:
+

+ {sampleText} +

+
+ ) + )) + ) + } + { + cssProperty.format === 'background' && ( + allColors.text.map(( + (c: cssColorIF) => ( +
+
Under {c.name}:
+

+ {sampleText} +

+
+ ) + )) + ) + } +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts b/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts index 6486ab6ab9..280771ace4 100644 --- a/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts +++ b/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts @@ -625,9 +625,9 @@ export function roundToNearestPreset(closest: number) { return Math.floor(closest); } -export const getCssVariable = (skin: skins, variableName: string) => { +export const getCssVariable = (activeSkin: skins, variableName: string) => { const themeElement = document.querySelector( - '[data-theme="' + skin + '"]', + '[data-theme="' + activeSkin + '"]', ) as Element; const value = getComputedStyle(themeElement) diff --git a/src/pages/platformAmbient/Chart/FeeRate/FeeRateChart.tsx b/src/pages/platformAmbient/Chart/FeeRate/FeeRateChart.tsx index 077e7a3f88..83a579123d 100644 --- a/src/pages/platformAmbient/Chart/FeeRate/FeeRateChart.tsx +++ b/src/pages/platformAmbient/Chart/FeeRate/FeeRateChart.tsx @@ -427,7 +427,7 @@ function FeeRateChart(props: FreeRateData) { style={{ display: 'block', gridColumnStart: 1, - gridColumnEnd: 4, + gridColumnEnd: 3, gridRowStart: 1, gridRowEnd: 3, }} @@ -440,7 +440,7 @@ function FeeRateChart(props: FreeRateData) { style={{ display: 'block', gridColumnStart: 1, - gridColumnEnd: 4, + gridColumnEnd: 3, gridRowStart: 1, gridRowEnd: 3, }} @@ -470,7 +470,8 @@ function FeeRateChart(props: FreeRateData) { ref={d3Yaxis} style={{ width: yAxisWidth, - gridColumn: 3, + gridColumnStart: 3, + gridColumnEnd: 4, gridRowStart: 1, gridRowEnd: 3, }} diff --git a/src/pages/platformAmbient/Chart/Tvl/TvlChart.tsx b/src/pages/platformAmbient/Chart/Tvl/TvlChart.tsx index 25028f5c8f..908904313c 100644 --- a/src/pages/platformAmbient/Chart/Tvl/TvlChart.tsx +++ b/src/pages/platformAmbient/Chart/Tvl/TvlChart.tsx @@ -586,7 +586,7 @@ function TvlChart(props: TvlData) { style={{ display: 'block', gridColumnStart: 1, - gridColumnEnd: 4, + gridColumnEnd: 3, gridRowStart: 1, gridRowEnd: 3, }} @@ -599,7 +599,7 @@ function TvlChart(props: TvlData) { style={{ display: 'block', gridColumnStart: 1, - gridColumnEnd: 4, + gridColumnEnd: 3, gridRowStart: 1, gridRowEnd: 3, }} @@ -625,7 +625,8 @@ function TvlChart(props: TvlData) { ref={d3Yaxis} style={{ width: yAxisWidth, - gridColumn: 3, + gridColumnStart: 3, + gridColumnEnd: 4, gridRowStart: 1, gridRowEnd: 3, }} diff --git a/src/pages/platformAmbient/Explore/Explore.module.css b/src/pages/platformAmbient/Explore/Explore.module.css index 1ebd6d5bb4..76b5cd8332 100644 --- a/src/pages/platformAmbient/Explore/Explore.module.css +++ b/src/pages/platformAmbient/Explore/Explore.module.css @@ -1,6 +1,6 @@ .main_container { background: var(--dark2); - padding: 16px; + padding: 8px; display: flex; flex-direction: column; gap: 16px; @@ -56,7 +56,7 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--dark3); + background-color: var(--dark2); border-radius: var(--border-radius); border: none; outline: none; @@ -71,9 +71,10 @@ flex: 1 0 0; border-radius: 4px; background: var(--dark2, #12121a); + border: 1px solid var(--dark3); width: 300px; - border: 1px solid var(--dark3); + } .input_wrapper { @@ -138,6 +139,10 @@ .title_text { font-size: 20px; } + + .input_container{ + border: none; + } } /* ----------------------------------- */ @@ -222,6 +227,10 @@ } @media only screen and (min-width: 768px) { + + .main_container{ + padding: 16px; + } .gridContainer { gap: 8px; } diff --git a/src/pages/platformAmbient/Portfolio/Portfolio.tsx b/src/pages/platformAmbient/Portfolio/Portfolio.tsx index aa908f3de4..85fd21d133 100644 --- a/src/pages/platformAmbient/Portfolio/Portfolio.tsx +++ b/src/pages/platformAmbient/Portfolio/Portfolio.tsx @@ -228,8 +228,11 @@ function Portfolio(props: PortfolioPropsIF) { } }, [isAutoLayout, matchesMinWidth, matchesMaxWidth]); + const [showTabsAndNotExchange, setShowTabsAndNotExchange] = useState(false); + - const modalVersion = ( + + const exchangeBalanceModal = ( setShowTabsAndNotExchange(false)}> ); - const exchangeBalanceComponent = showMobileVersion ? modalVersion : ( + const exchangeBalanceComponent = showMobileVersion && showTabsAndNotExchange ? exchangeBalanceModal : ( { - switch (true) { - case (!showTabsAndNotExchange && isUserConnected) || - (addressFromParams !== undefined && !connectedAccountActive): - return ; - - case showTabsAndNotExchange && - isUserConnected && - connectedAccountActive: - return exchangeBalanceComponent; - default: - return notConnectedContent; - } + if (isUserConnected || addressFromParams !== undefined) { + return ( + <> + + {showTabsAndNotExchange && exchangeBalanceComponent} + + ); + } + return notConnectedContent; })(); + const [availableHeight, setAvailableHeight] = useState(window.innerHeight); @@ -570,7 +571,7 @@ function Portfolio(props: PortfolioPropsIF) { ) : undefined} - {connectedAccountActive + {connectedAccountActive ? exchangeBalanceComponent : !isUserConnected && !addressFromParams ? notConnectedContent diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx index d0a34068b3..36e3a79470 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx @@ -5,7 +5,6 @@ import { AppStateContext } from '../../../../../contexts/AppStateContext'; import { ChartContext } from '../../../../../contexts/ChartContext'; import { printDomToImage } from '../../../../../ambient-utils/dataLayer'; import useCopyToClipboard from '../../../../../utils/hooks/useCopyToClipboard'; -import { FiCopy } from 'react-icons/fi'; import TradeChartsTokenInfo from '../TradeChartsComponents/TradeChartsTokenInfo'; import { useSimulatedIsPoolInitialized } from '../../../../../App/hooks/useSimulatedIsPoolInitialized'; import { FlexContainer } from '../../../../../styled/Common'; @@ -21,6 +20,7 @@ import { IoSettingsOutline } from 'react-icons/io5'; import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; import { TradeTableContext } from '../../../../../contexts/TradeTableContext'; import { BrandContext } from '../../../../../contexts/BrandContext'; +import { RiScreenshot2Fill } from 'react-icons/ri'; // import { IoSettingsOutline } from 'react-icons/io5'; export const TradeChartsHeader = (props: { tradePage?: boolean }) => { @@ -181,7 +181,7 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { } > @@ -193,7 +193,8 @@ export const TradeChartsHeader = (props: { tradePage?: boolean }) => { enterDelay={500} > -