From 51f0d4dbcf7a643fb46e1781df6930ffaa6733de Mon Sep 17 00:00:00 2001 From: GrandSchtroumpf Date: Tue, 31 Oct 2023 16:56:09 +0100 Subject: [PATCH 01/17] install @tanstack/react-router --- package.json | 1 + yarn.lock | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) diff --git a/package.json b/package.json index 1299175fe..4e0ded8b4 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@tanstack/react-location": "^3.7.4", "@tanstack/react-query": "^4.14.5", "@tanstack/react-query-devtools": "^4.14.5", + "@tanstack/react-router": "^0.0.1-beta.198", "@tanstack/react-table": "^8.9.3", "@tanstack/react-virtual": "^3.0.0-beta.30", "@testing-library/dom": "^7.21.4", diff --git a/yarn.lock b/yarn.lock index 4a525eab8..ba676d400 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1729,6 +1729,11 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d" integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA== +"@gisatcz/cross-package-react-context@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@gisatcz/cross-package-react-context/-/cross-package-react-context-0.2.0.tgz#e8626ed8693e053b858353e2253143201fabc30c" + integrity sha512-E7aR/o1ArpXETO8bQi+Hltj3duHeZiLjR+x1VZrCDs3jplSLGoy+oqCcqNNE1BamTBa0YQTs8Go1Q1dtt3LEUg== + "@humanwhocodes/config-array@^0.11.10": version "0.11.10" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" @@ -2428,6 +2433,11 @@ "@svgr/hast-util-to-babel-ast" "^6.5.1" svg-parser "^2.0.4" +"@tanstack/history@0.0.1-beta.198": + version "0.0.1-beta.198" + resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-0.0.1-beta.198.tgz#23be5513c762ab17dc82e02293b30ebbce0bcd5d" + integrity sha512-iqmFTXXH8Swy18SdwT9N441EbXfiazXxSxjDMdV+RHd0OKASYkJ57GIYidtDw7AP4pW9mhLNLmeBrHwSgU/1gw== + "@tanstack/match-sorter-utils@^8.7.0": version "8.8.4" resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457" @@ -2465,6 +2475,26 @@ "@tanstack/query-core" "4.32.6" use-sync-external-store "^1.2.0" +"@tanstack/react-router@^0.0.1-beta.198": + version "0.0.1-beta.198" + resolved "https://registry.yarnpkg.com/@tanstack/react-router/-/react-router-0.0.1-beta.198.tgz#7ce6128590279f5f72373c6379fd4e4a1f17da9d" + integrity sha512-AxR4VPTyHeF0YCB2oddMNsXV79Lt0ijDVeQOvYCvISpP2BJxO/Nr9QGewemcPw1xBm9OqpCcxXe7eUKJxFyOyw== + dependencies: + "@babel/runtime" "^7.16.7" + "@gisatcz/cross-package-react-context" "^0.2.0" + "@tanstack/react-store" "^0.0.1" + "@tanstack/router-core" "0.0.1-beta.198" + tiny-invariant "^1.3.1" + tiny-warning "^1.0.3" + +"@tanstack/react-store@^0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@tanstack/react-store/-/react-store-0.0.1.tgz#8b642309047c38584893ccac64f9c1e52f191a48" + integrity sha512-UMAHrm1FjehpfnSCi5Uel7fdoYM8fk2ovyHmoTBv4SPS66hLLEEVPQhALrIkJ0OSi1h+p96HapCFNqlavZADIA== + dependencies: + "@tanstack/store" "0.0.1" + use-sync-external-store "^1.2.0" + "@tanstack/react-table@^8.9.3": version "8.9.3" resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.9.3.tgz#03a52e9e15f65c82a8c697a445c42bfca0c5cfc4" @@ -2479,6 +2509,23 @@ dependencies: "@tanstack/virtual-core" "3.0.0-beta.54" +"@tanstack/router-core@0.0.1-beta.198": + version "0.0.1-beta.198" + resolved "https://registry.yarnpkg.com/@tanstack/router-core/-/router-core-0.0.1-beta.198.tgz#45c04bc09aed8b8f6b0f333b9f0197028bfbc21a" + integrity sha512-4chqtzl28YMyrmVfT94ZFz/NAP/dYd+PaqvKFfJTlbpghvRsaJYSysRGRqMpySQE7dFUSlAzi9OVk16r7FCROA== + dependencies: + "@babel/runtime" "^7.16.7" + "@gisatcz/cross-package-react-context" "^0.2.0" + "@tanstack/history" "0.0.1-beta.198" + "@tanstack/store" "^0.0.1" + tiny-invariant "^1.3.1" + tiny-warning "^1.0.3" + +"@tanstack/store@0.0.1", "@tanstack/store@^0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@tanstack/store/-/store-0.0.1.tgz#319c687921fee8896b92c4e512344eae4aa3f272" + integrity sha512-Hq5mwC9oPD1HVRIsgxASYtJQAv5x7k42SMXBq2b/fMYrtMf7WMkOArOMs/ExoNED214Ql94Ft4zVWr0u2D6a6w== + "@tanstack/table-core@8.9.3": version "8.9.3" resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.9.3.tgz#991da6b015f6200fdc841c48048bee5e197f6a46" @@ -7810,6 +7857,16 @@ thread-stream@^0.15.1: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== +tiny-invariant@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642" + integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw== + +tiny-warning@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tinybench@^2.3.1: version "2.5.0" resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.5.0.tgz#4711c99bbf6f3e986f67eb722fed9cddb3a68ba5" From f4e462d46c52883e37fff583c561bb2e01b2d800 Mon Sep 17 00:00:00 2001 From: GrandSchtroumpf Date: Wed, 1 Nov 2023 15:16:38 +0100 Subject: [PATCH 02/17] make application run --- src/App.tsx | 5 + src/components/common/walletConnect/index.tsx | 2 +- src/components/core/MainContent.tsx | 18 +- .../core/menu/mainMenu/MainMenuLeft.tsx | 4 +- .../core/menu/mobileMenu/MobileMenu.tsx | 6 +- src/components/explorer/ExplorerTabs.tsx | 6 +- src/components/explorer/index.ts | 1 - src/components/explorer/useExplorerParams.ts | 7 +- src/components/explorer/utils.ts | 14 +- .../strategies/create/CreateStrategyCTA.tsx | 6 +- .../create/CreateStrategyHeader.tsx | 9 +- src/components/strategies/create/types.ts | 2 +- .../edit/EditStrategyBudgetContent.tsx | 9 +- .../strategies/edit/EditStrategyHeader.tsx | 9 +- .../edit/EditStrategyPricesContent.tsx | 10 +- .../strategyBlock/StrategyBlockManage.tsx | 3 +- src/components/trade/useTradeTokens.ts | 6 +- src/index.tsx | 8 +- src/libs/routing/Link.tsx | 7 +- src/libs/routing/index.ts | 11 +- src/libs/routing/pathnames.ts | 27 ++ src/libs/routing/router.tsx | 21 +- src/libs/routing/routes.tsx | 271 ++++++++---------- src/pages/debug/index.tsx | 8 + src/pages/privacy/index.tsx | 8 + src/pages/strategies/create/index.tsx | 18 ++ src/pages/strategies/edit/index.tsx | 8 + src/pages/strategies/index.tsx | 6 +- .../strategies/portfolio/token/index.tsx | 2 +- src/pages/terms/index.tsx | 8 + src/pages/trade/index.tsx | 15 +- src/utils/helpers/index.ts | 10 +- 32 files changed, 284 insertions(+), 261 deletions(-) create mode 100644 src/libs/routing/pathnames.ts diff --git a/src/App.tsx b/src/App.tsx index 2644f3698..d4b18b8bf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { MainMenu, MobileMenu } from 'components/core/menu'; import { MainContent } from 'components/core/MainContent'; import { useStore } from 'store'; import { Toaster } from 'components/common/Toaster/Toaster'; +import { RootRoute } from '@tanstack/react-router'; let didInit = false; @@ -44,3 +45,7 @@ export const App = () => { ); }; + +export const appRoute = new RootRoute({ + component: App, +}); diff --git a/src/components/common/walletConnect/index.tsx b/src/components/common/walletConnect/index.tsx index 58882f0b5..0e29e2948 100644 --- a/src/components/common/walletConnect/index.tsx +++ b/src/components/common/walletConnect/index.tsx @@ -1,5 +1,5 @@ import { items } from './items'; -import { Link } from '@tanstack/react-location'; +import { Link } from 'libs/routing'; import { buttonStyles } from '../button/buttonStyles'; export const WalletConnect = () => { diff --git a/src/components/core/MainContent.tsx b/src/components/core/MainContent.tsx index 126027b29..a7fb9c052 100644 --- a/src/components/core/MainContent.tsx +++ b/src/components/core/MainContent.tsx @@ -1,6 +1,6 @@ import { FC, useEffect, useRef } from 'react'; import { useWeb3 } from 'libs/web3'; -import { Outlet, PathNames, useLocation } from 'libs/routing'; +import { Outlet, PathNames, useRouterState } from 'libs/routing'; import { ErrorUnsupportedNetwork } from 'components/core/error/ErrorUnsupportedNetwork'; import { ErrorNetworkConnection } from 'components/core/error/ErrorNetworkConnection'; import { useTokens } from 'hooks/useTokens'; @@ -12,7 +12,7 @@ import { ErrorUserBlocked } from 'components/core/error/ErrorUserBlocked'; export const MainContent: FC = () => { const web3 = useWeb3(); - const location = useLocation(); + const { location } = useRouterState(); const prevPathnameRef = useRef(''); const tokens = useTokens(); const sdk = useCarbonInit(); @@ -22,20 +22,20 @@ export const MainContent: FC = () => { top: 0, left: 0, }); - }, [location.current]); + }, [location]); useEffect(() => { - if (prevPathnameRef.current !== location.current.pathname) { + if (prevPathnameRef.current !== location.pathname) { carbonEvents.general.changePage({ referrer: prevPathnameRef.current }); - prevPathnameRef.current = location.current.pathname; + prevPathnameRef.current = location.pathname; } - }, [location, location.current.pathname]); + }, [location, location.pathname]); if ( - location.current.pathname === PathNames.debug || - location.current.pathname === PathNames.terms || - location.current.pathname === PathNames.privacy + location.pathname === PathNames.debug || + location.pathname === PathNames.terms || + location.pathname === PathNames.privacy ) { return ; } diff --git a/src/components/core/menu/mainMenu/MainMenuLeft.tsx b/src/components/core/menu/mainMenu/MainMenuLeft.tsx index cc05958a7..e1c59b838 100644 --- a/src/components/core/menu/mainMenu/MainMenuLeft.tsx +++ b/src/components/core/menu/mainMenu/MainMenuLeft.tsx @@ -1,13 +1,13 @@ import { FC } from 'react'; import { carbonEvents } from 'services/events'; -import { Link, PathNames, useLocation } from 'libs/routing'; +import { Link, PathNames, useRouterState } from 'libs/routing'; import { ReactComponent as LogoCarbon } from 'assets/logos/carbon.svg'; import { isPathnameMatch } from 'utils/helpers'; import { handleOnItemClick } from '../utils'; import { menuItems } from 'components/core/menu'; export const MainMenuLeft: FC = () => { - const pathname = useLocation().current.pathname; + const pathname = useRouterState().location.pathname; return (