fix: short chain name for governance url (#2753)

novasamatech · Nov 28, 2024 · bdd6974 · bdd6974
1 parent d824c96
commit bdd6974
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 11 deletions.
diff --git a/src/renderer/entities/network/lib/network-utils.ts b/src/renderer/entities/network/lib/network-utils.ts
@@ -31,6 +31,7 @@ export const networkUtils = {
   getLightClientChains,
 
   getMainRelaychains,
+  chainNameToUrl,
 };
 
 function isConnectedStatus(status: ConnectionStatus): boolean {
@@ -109,3 +110,9 @@ function getMainRelaychains(chains: Chain[]): Chain[] {
 
   return chains.filter(({ chainId }) => MainRelaychains.includes(chainId));
 }
+
+function chainNameToUrl(name: string): string {
+  const urlAllowedCharacters = /[^a-zA-Z0-9-]+$/;
+
+  return name.split(' ').join('-').toLowerCase().replace(urlAllowedCharacters, '').replace(/-{2,}/g, '-');
+}
diff --git a/src/renderer/pages/Governance/lib/constants.ts b/src/renderer/pages/Governance/lib/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_GOVERNANCE_CHAIN = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3';
diff --git a/src/renderer/pages/Governance/ui/Governance.tsx b/src/renderer/pages/Governance/ui/Governance.tsx
@@ -2,11 +2,11 @@ import { useGate, useUnit } from 'effector-react';
 import { useEffect, useLayoutEffect } from 'react';
 import { Outlet, generatePath, useParams } from 'react-router-dom';
 
-import { type ChainId } from '@/shared/core';
+import { type Chain, type ChainId } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { Paths } from '@/shared/routes';
 import { Header, Plate } from '@/shared/ui';
-import { networkModel } from '@/entities/network';
+import { networkModel, networkUtils } from '@/entities/network';
 import {
   Locks,
   NetworkSelector,
@@ -22,8 +22,7 @@ import { Delegate } from '@/widgets/DelegateModal';
 import { DelegationModal, delegationModel } from '@/widgets/DelegationModal';
 import { UnlockModal, unlockAggregate } from '@/widgets/UnlockModal';
 import { governancePageAggregate } from '../aggregates/governancePage';
-
-const DEFAULT_GOVERNANCE_CHAIN = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3';
+import { DEFAULT_GOVERNANCE_CHAIN } from '../lib/constants';
 
 export const Governance = () => {
   useGate(governancePageAggregate.gates.flow);
@@ -37,18 +36,30 @@ export const Governance = () => {
 
   useEffect(() => {
     if (selectedChain && !referendumId) {
-      navigationModel.events.navigateTo(generatePath(Paths.GOVERNANCE_LIST, { chainId: selectedChain.chainId }));
+      navigationModel.events.navigateTo(
+        generatePath(Paths.GOVERNANCE_LIST, { chainId: networkUtils.chainNameToUrl(selectedChain.name) }),
+      );
     }
   }, [selectedChain, referendumId]);
 
   useLayoutEffect(() => {
-    const newChain = networks[chainId as ChainId];
+    let chain: Chain | undefined;
+
+    chain = networks[(chainId as ChainId) || DEFAULT_GOVERNANCE_CHAIN];
+
+    if (!chain) {
+      chain = Object.values(networks).find((chain) => networkUtils.chainNameToUrl(chain.name) === chainId);
+    }
 
-    if (chainId && chainId.startsWith('0x') && newChain) {
-      networkSelectorModel.events.selectNetwork(newChain);
+    if (chain) {
+      networkSelectorModel.events.selectNetwork(chain);
     } else {
       // navigate to default chain
-      navigationModel.events.navigateTo(generatePath(Paths.GOVERNANCE_LIST, { chainId: DEFAULT_GOVERNANCE_CHAIN }));
+      navigationModel.events.navigateTo(
+        generatePath(Paths.GOVERNANCE_LIST, {
+          chainId: networkUtils.chainNameToUrl(networks[DEFAULT_GOVERNANCE_CHAIN].name),
+        }),
+      );
     }
   }, [chainId]);
 

diff --git a/src/renderer/pages/Governance/ui/GovernanceReferendumDetails.tsx b/src/renderer/pages/Governance/ui/GovernanceReferendumDetails.tsx
@@ -11,6 +11,7 @@ import { navigationModel } from '@/features/navigation';
 import { RemoveVotesModal } from '@/widgets/RemoveVotesModal';
 import { RevoteModal, VoteModal } from '@/widgets/VoteModal';
 import { governancePageAggregate } from '../aggregates/governancePage';
+import { DEFAULT_GOVERNANCE_CHAIN } from '../lib/constants';
 
 export const GovernanceReferendumDetails = () => {
   useGate(governancePageAggregate.gates.flow);
@@ -23,7 +24,7 @@ export const GovernanceReferendumDetails = () => {
   const network = useUnit(networkSelectorModel.$network);
   const all = useUnit(governancePageAggregate.$all);
 
-  if (!chainId || !referendumId) {
+  if (!referendumId) {
     return null;
   }
 
@@ -57,7 +58,9 @@ export const GovernanceReferendumDetails = () => {
             setShowVoteModal(false);
             setShowRevoteModal(false);
             setShowRemoveVoteModal(false);
-            navigationModel.events.navigateTo(generatePath(Paths.GOVERNANCE_LIST, { chainId }));
+            navigationModel.events.navigateTo(
+              generatePath(Paths.GOVERNANCE_LIST, { chainId: chainId || DEFAULT_GOVERNANCE_CHAIN }),
+            );
           }}
           onVoteRequest={() => {
             setShowVoteModal(true);

diff --git a/src/renderer/pages/index.tsx b/src/renderer/pages/index.tsx
@@ -67,6 +67,14 @@ export const ROUTES_CONFIG: RouteObject[] = [
           </Suspense>
         ),
         children: [
+          {
+            path: Paths.GOVERNANCE_REFERENDUM_DEFAULT_CHAIN,
+            element: (
+              <Suspense fallback={null}>
+                <GovernanceReferendumDetails />
+              </Suspense>
+            ),
+          },
           {
             path: Paths.GOVERNANCE_LIST,
             element: (

diff --git a/src/renderer/shared/routes/paths.ts b/src/renderer/shared/routes/paths.ts
@@ -29,6 +29,7 @@ export const Paths = {
   // Governance
   GOVERNANCE: '/governance',
   GOVERNANCE_LIST: '/governance/:chainId',
+  GOVERNANCE_REFERENDUM_DEFAULT_CHAIN: '/governance/referendum/:referendumId',
   GOVERNANCE_REFERENDUM: '/governance/:chainId/referendum/:referendumId',
 
   // Fellowship
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const DEFAULT_GOVERNANCE_CHAIN = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3';