From 80e1b1b0e6cc711ecbf129033abff996283b1bf3 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:16:49 -0400 Subject: [PATCH 1/9] add new `isPage()` method to `useLinkGen.ts` hook --- src/utils/hooks/useLinkGen.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/utils/hooks/useLinkGen.ts b/src/utils/hooks/useLinkGen.ts index 516df19cd3..7b4e4931cb 100644 --- a/src/utils/hooks/useLinkGen.ts +++ b/src/utils/hooks/useLinkGen.ts @@ -73,7 +73,10 @@ export type pageNames = keyof typeof BASE_URL_PATHS; export type baseURLs = typeof BASE_URL_PATHS[pageNames]; export interface linkGenMethodsIF { - currentPage: pageNames; + current: { + page: pageNames; + isPage: (...p: pageNames[]) => boolean; + }; baseURL: baseURLs; getFullURL: (paramsObj?: anyParamsIF | string) => string; navigate: (paramsObj?: anyParamsIF | string) => void; @@ -158,8 +161,19 @@ export const useLinkGen = (page?: pageNames): linkGenMethodsIF => { navigate(getFullURL(paramsObj), { replace: true }); } + // fn to determine whether user is currently on one of some number of pages + function isPage(...p: pageNames[]): boolean { + // must get page from current location, not from args for hook + const currentPage: pageNames = getPageFromLocation(); + // determine if current page matches any on the args provided + return p.includes(currentPage); + } + return { - currentPage: getPageFromLocation(), + current: { + page: getPageFromLocation(), + isPage, + }, baseURL, getFullURL, navigate: navigateUser, From dcb905c05bbef8d9f4d9407adecd8aa8bded3699 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:21:53 -0400 Subject: [PATCH 2/9] refactor `useAppChain.ts` to comply with new `useLinkGen.ts` structure --- src/App/hooks/useAppChain.ts | 13 ++++++------- src/utils/hooks/useLinkGen.ts | 3 --- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/App/hooks/useAppChain.ts b/src/App/hooks/useAppChain.ts index 7ea6161c09..f4490820a2 100644 --- a/src/App/hooks/useAppChain.ts +++ b/src/App/hooks/useAppChain.ts @@ -137,8 +137,10 @@ export const useAppChain = (): { // navigate to index page only if "chain" or "network" in URL linkGenIndex.navigate(); } else if ( - linkGenCurrent.currentPage === 'initpool' || - linkGenCurrent.currentPage === 'reposition' + linkGenCurrent.current.isPage( + 'initpool', + 'reposition', + ) ) { linkGenPool.navigate( `chain=${incomingChainFromWallet}`, @@ -233,12 +235,9 @@ export const useAppChain = (): { const isPathUserAddress = isPathENS || isPathHex; const isPathUserXpOrLeaderboard = pathname.includes('/xp'); const isPathOnExplore = pathname.includes('/explore'); - if ( - linkGenCurrent.currentPage === 'initpool' || - linkGenCurrent.currentPage === 'reposition' - ) { + if (linkGenCurrent.current.isPage('initpool', 'reposition')) { linkGenPool.navigate(`chain=${network.chainId}`); - } else if (linkGenCurrent.currentPage === 'swap') { + } else if (linkGenCurrent.current.isPage('swap')) { linkGenSwap.navigate(`chain=${network.chainId}`); } else if (pathname.includes('chain')) { linkGenCurrent.navigate(`chain=${network.chainId}`); diff --git a/src/utils/hooks/useLinkGen.ts b/src/utils/hooks/useLinkGen.ts index 7b4e4931cb..a5d90ba0de 100644 --- a/src/utils/hooks/useLinkGen.ts +++ b/src/utils/hooks/useLinkGen.ts @@ -83,9 +83,6 @@ export interface linkGenMethodsIF { redirect: (paramsObj?: anyParamsIF | string) => void; } -// TODO: @Emily: it probably makes sense to expand this hook to -// TODO: .... centralize URLs to link external resources - export const useLinkGen = (page?: pageNames): linkGenMethodsIF => { // current URL path of the app relative to index page const { pathname } = useLocation(); From 98b6a6c6aaf6ac7b8fa74096dafd2763221427d0 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:23:37 -0400 Subject: [PATCH 3/9] refactor `TradeTableContext.ts` to comply with new `useLinkGen.ts` structure --- src/contexts/TradeTableContext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/contexts/TradeTableContext.tsx b/src/contexts/TradeTableContext.tsx index 202e4647f6..2cf132db79 100644 --- a/src/contexts/TradeTableContext.tsx +++ b/src/contexts/TradeTableContext.tsx @@ -166,7 +166,7 @@ export const TradeTableContextProvider = (props: { useEffect(() => { if (location.pathname.includes('/trade')) toggleTradeTabBasedOnRoute(); - switch (linkGenCurrent.currentPage) { + switch (linkGenCurrent.current.page) { case 'market': setCurrentPositionActive(''); setCurrentLimitOrderActive(''); @@ -182,7 +182,7 @@ export const TradeTableContextProvider = (props: { default: break; } - }, [linkGenCurrent.currentPage]); + }, [linkGenCurrent.current.page]); const resetTable = () => { if ( From 06bac4b7650f45fa409c1681ee9d866dd32ca2a4 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:25:10 -0400 Subject: [PATCH 4/9] refactor `useUrlParams.ts` to comply with new `useLinkGen.ts` structure --- src/utils/hooks/useUrlParams.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/hooks/useUrlParams.ts b/src/utils/hooks/useUrlParams.ts index cc43d24b30..9625459701 100644 --- a/src/utils/hooks/useUrlParams.ts +++ b/src/utils/hooks/useUrlParams.ts @@ -45,7 +45,7 @@ export const useUrlParams = ( // generate an array of required params in the URL based on route const requiredParams = useMemo(() => { // name of page currently in the DOM - const pageName: pageNames = linkGenCurrent.currentPage; + const pageName: pageNames = linkGenCurrent.current.page; // global params for all parameterized pathways const globalParams: validParamsType[] = ['chain', 'tokenA', 'tokenB']; // output variable @@ -67,7 +67,7 @@ export const useUrlParams = ( } // return array of required URL params return paramsForPage; - }, [linkGenCurrent.currentPage]); + }, [linkGenCurrent.current.page]); // map of all params in the current URL string const urlParamMap = useMemo>(() => { From 4246ff84b0ae3f66d2ee4297aa8ceaee52fbf45c Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:25:37 -0400 Subject: [PATCH 5/9] remove deprecated code from `useUrlParams.ts` file --- src/utils/hooks/useUrlParams.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/utils/hooks/useUrlParams.ts b/src/utils/hooks/useUrlParams.ts index 9625459701..5f44a591ef 100644 --- a/src/utils/hooks/useUrlParams.ts +++ b/src/utils/hooks/useUrlParams.ts @@ -194,20 +194,6 @@ export const useUrlParams = ( } } - // function inflateProvider(chainId: string) { - // if (!provider) { - // provider = useProvider({ chainId: parseInt(chainId) }); - // if (!provider) { - // console.warn( - // 'Cannot set provider to lookup token address on chain', - // chainId, - // ); - // return undefined; - // } - // } - // return provider; - // } - function processOptParam( paramName: validParamsType, processFn: (val: string) => void, From 0ca774b2763200327c0b817bec50cee31639c263 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 11:40:58 -0400 Subject: [PATCH 6/9] refactor `App.tsx` to use new `isPage()` method --- src/App/App.tsx | 49 ++++++++++++++++++++++++----------- src/utils/hooks/useLinkGen.ts | 2 ++ 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index fa1aa0091b..48ee5f3449 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -47,6 +47,7 @@ import useMediaQuery from '../utils/hooks/useMediaQuery'; import { FlexContainer } from '../styled/Common'; import ExampleForm from '../pages/InitPool/FormExample'; import PointSystemPopup from '../components/Global/PointSystemPopup/PointSystemPopup'; +import { linkGenMethodsIF, useLinkGen } from '../utils/hooks/useLinkGen'; /** ***** React Function *******/ export default function App() { @@ -75,9 +76,12 @@ export default function App() { const smallScreen = useMediaQuery('(max-width: 500px)'); + // methods to determine current page occupied by the user + const linkGenCurrent: linkGenMethodsIF = useLinkGen(); + // Take away margin from left if we are on homepage or swap const swapBodyStyle = - currentLocation.startsWith('/swap') && !smallScreen + linkGenCurrent.current.isPage('swap') && !smallScreen ? 'swap-body' : null; @@ -85,13 +89,21 @@ export default function App() { const sidebarRender = smallScreen ? ( ) : ( - currentLocation !== '/' && - currentLocation !== '/swap' && - currentLocation !== '/404' && - currentLocation !== '/terms' && - currentLocation !== '/privacy' && - !currentLocation.includes('/chat') && - !currentLocation.includes('/initpool') && + // currentLocation !== '/' && + // currentLocation !== '/swap' && + // currentLocation !== '/404' && + // currentLocation !== '/terms' && + // currentLocation !== '/privacy' && + // !currentLocation.includes('/chat') && + // !currentLocation.includes('/initpool') && + !linkGenCurrent.current.isPage( + 'index', + 'swap', + 'notFound', + 'tos', + 'privacy', + 'initpool', + ) && !fullScreenChart && ( // isChainSupported && @@ -104,13 +116,20 @@ export default function App() { const showSidebarOrNullStyle = smallScreen ? sidebarDislayStyle - : currentLocation == '/' || - currentLocation == '/swap' || - currentLocation == '/404' || - currentLocation == '/terms' || - currentLocation == '/privacy' || - currentLocation.includes('/chat') || - currentLocation.startsWith('/swap') + : // : currentLocation == '/' || + // currentLocation == '/swap' || + // currentLocation == '/404' || + // currentLocation == '/terms' || + // currentLocation == '/privacy' || + // currentLocation.includes('/chat') || + // currentLocation.startsWith('/swap') || + linkGenCurrent.current.isPage( + 'index', + 'swap', + 'notFound', + 'tos', + 'privacy', + ) ? 'hide_sidebar' : sidebarDislayStyle; diff --git a/src/utils/hooks/useLinkGen.ts b/src/utils/hooks/useLinkGen.ts index a5d90ba0de..0e40142365 100644 --- a/src/utils/hooks/useLinkGen.ts +++ b/src/utils/hooks/useLinkGen.ts @@ -53,6 +53,7 @@ const BASE_URL_PATHS = { index: '', home: '', swap: '/swap', + market: '/trade/market', limit: '/trade/limit', pool: '/trade/pool', @@ -65,6 +66,7 @@ const BASE_URL_PATHS = { testpage: '/testpage', account: '/account', privacy: '/privacy', + notFound: '/404', } as const; // string-literal union type of keys in `BASE_URL_PATHS` From d7480c3970e7fffe2b40f9e3d5e80467059d2731 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 12:07:52 -0400 Subject: [PATCH 7/9] add logic to `isPage()` method in `useLinkGen.ts` file to handle nested routes --- src/utils/hooks/useLinkGen.ts | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/utils/hooks/useLinkGen.ts b/src/utils/hooks/useLinkGen.ts index 0e40142365..bdbee37db5 100644 --- a/src/utils/hooks/useLinkGen.ts +++ b/src/utils/hooks/useLinkGen.ts @@ -53,7 +53,7 @@ const BASE_URL_PATHS = { index: '', home: '', swap: '/swap', - + trade: '/trade', market: '/trade/market', limit: '/trade/limit', pool: '/trade/pool', @@ -113,8 +113,6 @@ export const useLinkGen = (page?: pageNames): linkGenMethodsIF => { pageName = 'initpool'; } else if (pathname.startsWith(BASE_URL_PATHS.reposition)) { pageName = 'reposition'; - } else if (pathname.startsWith(BASE_URL_PATHS.explore)) { - pageName = 'explore'; } else if (pathname.startsWith(BASE_URL_PATHS.explorePools)) { pageName = 'explorePools'; } else if (pathname.startsWith(BASE_URL_PATHS.exploreTokens)) { @@ -164,8 +162,22 @@ export const useLinkGen = (page?: pageNames): linkGenMethodsIF => { function isPage(...p: pageNames[]): boolean { // must get page from current location, not from args for hook const currentPage: pageNames = getPageFromLocation(); + // array to hold nested routes + const addedPages: pageNames[] = []; + // fn to add data to the `addedPages` array without duplication + function addPages(...pagesToAdd: pageNames[]): void { + const nonDuplicated: pageNames[] = pagesToAdd.filter( + (page: pageNames) => + !p.includes(page) && !addedPages.includes(page), + ); + addedPages.concat(nonDuplicated); + } + // add nested routes is this fn is called on a parent route + p.includes('trade') && + addPages('market', 'limit', 'pool', 'reposition'); + p.includes('explore') && addPages('explorePools', 'exploreTokens'); // determine if current page matches any on the args provided - return p.includes(currentPage); + return p.concat(addedPages).includes(currentPage); } return { From 83f2f4d7233e23b331d06f58cdd62e72c604a8d6 Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 12:18:13 -0400 Subject: [PATCH 8/9] refactor `App.tsx` for expanded use of new `isPage()` method --- src/App/App.tsx | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 48ee5f3449..34ff71fb30 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -1,12 +1,6 @@ /** ***** Import React and Dongles *******/ import { useContext, useEffect } from 'react'; -import { - Routes, - Route, - useLocation, - Navigate, - useNavigate, -} from 'react-router-dom'; +import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'; import SnackbarComponent from '../components/Global/SnackbarComponent/SnackbarComponent'; /** ***** Import JSX Files *******/ @@ -52,8 +46,6 @@ import { linkGenMethodsIF, useLinkGen } from '../utils/hooks/useLinkGen'; /** ***** React Function *******/ export default function App() { const navigate = useNavigate(); - const location = useLocation(); - const currentLocation = location.pathname; const { chat: { @@ -133,7 +125,7 @@ export default function App() { ? 'hide_sidebar' : sidebarDislayStyle; - const containerStyle = currentLocation.includes('trade') + const containerStyle = linkGenCurrent.current.isPage('trade') ? 'content-container-trade' : 'content-container'; @@ -203,7 +195,7 @@ export default function App() {
- {(!currentLocation.startsWith('/swap') || smallScreen) && + {(!linkGenCurrent.current.isPage('swap') || smallScreen) && sidebarRender} } /> @@ -377,15 +369,24 @@ export default function App() {
- {currentLocation !== '/' && - currentLocation !== '/404' && - currentLocation !== '/terms' && - currentLocation !== '/privacy' && - !currentLocation.includes('/chat') && - isChatEnabled && } - {showMobileVersion && currentLocation !== '/' && ( - - )} + { + // currentLocation !== '/' && + // currentLocation !== '/404' && + // currentLocation !== '/terms' && + // currentLocation !== '/privacy' && + // !currentLocation.includes('/chat') && + !linkGenCurrent.current.isPage( + 'index', + 'notFound', + 'tos', + 'privacy', + ) && + isChatEnabled && + } + {showMobileVersion && + !linkGenCurrent.current.isPage('index') && ( + + )}
From 0cae07ab662fbc5e7ffd95569aa1b7d15cd4358d Mon Sep 17 00:00:00 2001 From: mhsmith321 Date: Tue, 26 Mar 2024 12:31:04 -0400 Subject: [PATCH 9/9] remove deprecated code from `App.tsx` file --- src/App/App.tsx | 42 +++++++++--------------------------------- 1 file changed, 9 insertions(+), 33 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 34ff71fb30..d9dc2210ae 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -81,13 +81,6 @@ export default function App() { const sidebarRender = smallScreen ? ( ) : ( - // currentLocation !== '/' && - // currentLocation !== '/swap' && - // currentLocation !== '/404' && - // currentLocation !== '/terms' && - // currentLocation !== '/privacy' && - // !currentLocation.includes('/chat') && - // !currentLocation.includes('/initpool') && !linkGenCurrent.current.isPage( 'index', 'swap', @@ -96,10 +89,7 @@ export default function App() { 'privacy', 'initpool', ) && - !fullScreenChart && ( - // isChainSupported && - - ) + !fullScreenChart && ); const sidebarDislayStyle = isSidebarOpen @@ -108,14 +98,7 @@ export default function App() { const showSidebarOrNullStyle = smallScreen ? sidebarDislayStyle - : // : currentLocation == '/' || - // currentLocation == '/swap' || - // currentLocation == '/404' || - // currentLocation == '/terms' || - // currentLocation == '/privacy' || - // currentLocation.includes('/chat') || - // currentLocation.startsWith('/swap') || - linkGenCurrent.current.isPage( + : linkGenCurrent.current.isPage( 'index', 'swap', 'notFound', @@ -369,20 +352,13 @@ export default function App() {
- { - // currentLocation !== '/' && - // currentLocation !== '/404' && - // currentLocation !== '/terms' && - // currentLocation !== '/privacy' && - // !currentLocation.includes('/chat') && - !linkGenCurrent.current.isPage( - 'index', - 'notFound', - 'tos', - 'privacy', - ) && - isChatEnabled && - } + {!linkGenCurrent.current.isPage( + 'index', + 'notFound', + 'tos', + 'privacy', + ) && + isChatEnabled && } {showMobileVersion && !linkGenCurrent.current.isPage('index') && (