From 1f591dddef89ff21e03d4d29596ad34b8ff905af Mon Sep 17 00:00:00 2001 From: Eric Corson Date: Thu, 18 May 2023 13:12:15 +0900 Subject: [PATCH] fix: fix useSanitizedLocation hook The hook broke when it was moved from namada-interface to packages/hooks. There were two versions of react-router-dom present, and the interface and the package were being built with different versions, which caused the Location context objects to not be equal, ultimately causing useLocation to fail. This commit aligns the version of react-router-dom in the extension with the version in the interface, which ensures only one copy is installed by `yarn install`. --- apps/extension/package.json | 2 +- .../src/App/Staking/Staking.tsx | 4 ++-- .../StakingAndGovernance.tsx | 4 ++-- .../src/App/TopNavigation/topNavigation.tsx | 4 ++-- yarn.lock | 17 +---------------- 5 files changed, 8 insertions(+), 23 deletions(-) diff --git a/apps/extension/package.json b/apps/extension/package.json index 8e1c825f698..48f7219bd10 100644 --- a/apps/extension/package.json +++ b/apps/extension/package.json @@ -39,7 +39,7 @@ "framer-motion": "6.2.4", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-router-dom": "6", + "react-router-dom": "^6.0.0", "styled-components": "^5.3.5", "typescript": "^4.8.2", "uuid": "^9.0.0", diff --git a/apps/namada-interface/src/App/Staking/Staking.tsx b/apps/namada-interface/src/App/Staking/Staking.tsx index 423572c3bdf..95ace8efe6e 100644 --- a/apps/namada-interface/src/App/Staking/Staking.tsx +++ b/apps/namada-interface/src/App/Staking/Staking.tsx @@ -18,7 +18,7 @@ import { import { NewBondingPosition } from "./NewBondingPosition"; import { UnbondPosition } from "./UnbondPosition"; import { Account } from "slices/accounts"; -import { useLocation } from "react-router-dom"; +import { useSanitizedLocation } from "@anoma/hooks"; const initialTitle = "Staking"; @@ -96,7 +96,7 @@ export enum ModalOnRequestCloseType { export const Staking = (props: Props): JSX.Element => { const [breadcrumb, setBreadcrumb] = useState([initialTitle]); const [modalState, setModalState] = useState(ModalState.None); - const location = useLocation(); + const location = useSanitizedLocation(); const navigate = useNavigate(); const { diff --git a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx index a345f2b7ba2..21aac1330f1 100644 --- a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx +++ b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx @@ -12,6 +12,7 @@ import { StakingAndGovernanceSubRoute, locationToStakingAndGovernanceSubRoute, } from "App/types"; +import { useSanitizedLocation } from "@anoma/hooks"; import { fetchValidators, @@ -22,7 +23,6 @@ import { } from "slices/StakingAndGovernance"; import { SettingsState } from "slices/settings"; import { AccountsState } from "slices/accounts"; -import { useLocation } from "react-router-dom"; export type { ChangeInStakingPosition }; // This is just rendering the actual Staking/Governance/PGF screens @@ -30,7 +30,7 @@ export type { ChangeInStakingPosition }; // the user clicks the top level Staking & Governance menu // export const StakingAndGovernance = (): JSX.Element => { - const location = useLocation(); + const location = useSanitizedLocation(); const navigate = useNavigate(); const dispatch = useAppDispatch(); const stakingAndGovernance = useAppSelector( diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx b/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx index 1a58dd81ba0..d3d3c574fd7 100644 --- a/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx +++ b/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx @@ -1,7 +1,6 @@ import React, { useState, useContext } from "react"; import { ThemeContext } from "styled-components"; import { - useLocation, useNavigate, NavigateFunction, Location, @@ -18,6 +17,7 @@ import { Toggle, Select, } from "@anoma/components"; +import { useSanitizedLocation } from "@anoma/hooks"; import { useAppDispatch, useAppSelector } from "store"; import { AppStore } from "store/store"; @@ -214,7 +214,7 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { const navigate = useNavigate(); const themeContext = useContext(ThemeContext); const [showMenu, setShowMenu] = useState(false); - const location = useLocation(); + const location = useSanitizedLocation(); const topLevelRoute = locationToTopLevelRoute(location); const stakingAndGovernanceSubRoute = locationToStakingAndGovernanceSubRoute(location); diff --git a/yarn.lock b/yarn.lock index 58bc4e19869..d7a0f1ec1cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9692,7 +9692,7 @@ hey-listen@^1.0.8: resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== -history@^5.2.0, history@^5.3.0: +history@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== @@ -14816,14 +14816,6 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-router-dom@6: - version "6.2.2" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.2.tgz#f1a2c88365593c76b9612ae80154a13fcb72e442" - integrity sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ== - dependencies: - history "^5.2.0" - react-router "6.2.2" - react-router-dom@^6.0.0: version "6.8.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.2.tgz#a6654a3400be9aafd504d7125573568921b78b57" @@ -14832,13 +14824,6 @@ react-router-dom@^6.0.0: "@remix-run/router" "1.3.3" react-router "6.8.2" -react-router@6.2.2: - version "6.2.2" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.2.tgz#495e683a0c04461eeb3d705fe445d6cf42f0c249" - integrity sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ== - dependencies: - history "^5.2.0" - react-router@6.8.2: version "6.8.2" resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.2.tgz#98f83582a73f316a3287118b440f0cee30ed6f33"