Merge pull request #613 from eco-stake/validator-profile-direct-links

Link directly to validator profile tabs
eco-stake · Sep 30, 2022 · 0f2ae23 · 0f2ae23
2 parents 6bed481 + 9bd781c
commit 0f2ae23
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/ValidatorModal.js b/src/components/ValidatorModal.js
@@ -19,24 +19,30 @@ import ValidatorGrants from './ValidatorGrants';
 
 function ValidatorModal(props) {
   const { redelegate, undelegate, validator, delegations, operators, network, validators, grants } = props
-  const [selectedValidator, setSelectedValidator] = useState(!redelegate && validator);
-  const [activeTab, setActiveTab] = useState();
   const navigate = useNavigate()
   const params = useParams();
+  const [selectedValidator, setSelectedValidator] = useState(!redelegate && validator);
+  const [activeTab, setActiveTab] = useState(params.section);
 
   useEffect(() => {
     if(params.network !== network.name) return
 
-    if (props.show && selectedValidator && validator?.operator_address === selectedValidator.operator_address && params.validator !== selectedValidator.operator_address) {
-      navigate(`/${network.name}/${selectedValidator.operator_address}`)
+    const shouldShow = props.show && selectedValidator && validator?.operator_address === selectedValidator.operator_address
+    const shouldChangeValidator = params.validator !== selectedValidator?.operator_address
+    const shouldChangeTab = activeTab === 'profile' ? !!params.section : params.section !== activeTab
+    const shouldChangeUrl = shouldShow && (shouldChangeValidator || shouldChangeTab)
+    if (shouldChangeUrl) {
+      navigate(`/${network.name}/${selectedValidator.operator_address}${activeTab === 'profile' ? '' : `/${activeTab}`}`)
     } else if (params.validator && props.show === false) {
       navigate(`/${network.name}`)
     }
-  }, [props.show, params.validator, selectedValidator])
+  }, [props.show, params.validator, params.section, activeTab, selectedValidator])
 
   useEffect(() => {
     if (props.activeTab && props.activeTab != activeTab) {
       setActiveTab(props.activeTab)
+    } else if (params.section && params.section != activeTab) {
+      setActiveTab(params.section)
     } else if (redelegate || undelegate) {
       setActiveTab('delegate')
     } else if (!activeTab) {

diff --git a/src/index.js b/src/index.js
@@ -24,6 +24,7 @@ const app = (
         <Route path="/:network/govern/:proposalId" element={<NetworkFinder />} />
         <Route path="/:network/grant" element={<NetworkFinder />} />
         <Route path="/:network/:validator" element={<NetworkFinder />} />
+        <Route path="/:network/:validator/:section" element={<NetworkFinder />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>