feat(tangle-dapp): Parse chainId

apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx

@@ -15,6 +15,7 @@ import {
 } from '@webb-tools/webb-ui-components';
 import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
 import { FC, useCallback, useMemo, useState } from 'react';
+import { z } from 'zod';
 
 import {
   LST_PREFIX,
@@ -47,6 +48,7 @@ const LiquidStakeCard: FC = () => {
 
   const searchParams = useTypedSearchParams({
     amount: (value) => new BN(value),
+    chainId: (value) => z.nativeEnum(ParachainChainId).parse(parseInt(value)),
   });
 
   // TODO: Must set the amount ONCE, if it is provided in the URL search params and parsed correctly. Setting the value once might prove difficult unless a useMemo is given to the `useTypedSearchParams` hook to maintain 'stability'.

apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx

@@ -14,8 +14,8 @@ import { twMerge } from 'tailwind-merge';
 
 import {
   LiquidStakingToken,
-  LS_CHAIN_TO_NETWORK_NAME,
   LST_PREFIX,
+  PARACHAIN_CHAIN_MAP,
   ParachainChainId,
 } from '../../../constants/liquidStaking';
 import { ERROR_NOT_ENOUGH_BALANCE } from '../../../containers/ManageProfileModalContainer/Independent/IndependentAllocationInput';
@@ -160,14 +160,15 @@ const ChainSelector: FC<ChainSelectorProps> = ({
   setChain,
 }) => {
   const isReadOnly = setChain === undefined;
+  const networkName = PARACHAIN_CHAIN_MAP[selectedChainId].networkName;
 
   const base = (
     <div className="group flex gap-1 items-center justify-center">
       <div className="flex gap-2 items-center justify-center">
         <ChainLogo size="sm" chainId={selectedChainId} />
 
         <Typography variant="h5" fw="bold" className="dark:text-mono-40">
-          {LS_CHAIN_TO_NETWORK_NAME[selectedChainId]}
+          {networkName}
         </Typography>
       </div>
 
@@ -192,7 +193,7 @@ const ChainSelector: FC<ChainSelectorProps> = ({
                       onSelect={() => setChain(chainId)}
                       className="px-3 normal-case"
                     >
-                      {LS_CHAIN_TO_NETWORK_NAME[chainId]}
+                      {networkName}
                     </DropdownMenuItem>
                   </li>
                 );

apps/tangle-dapp/constants/liquidStaking.ts

@@ -8,12 +8,12 @@ import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-u
 import { StaticAssetPath } from '.';
 
 export enum ParachainChainId {
-  POLKADOT = 'Polkadot',
-  PHALA = 'Phala',
-  MOONBEAM = 'Moonbeam',
-  ASTAR = 'Astar',
-  MANTA = 'Manta',
-  TANGLE_RESTAKING_PARACHAIN = 'Tangle Parachain',
+  POLKADOT,
+  PHALA,
+  MOONBEAM,
+  ASTAR,
+  MANTA,
+  TANGLE_RESTAKING_PARACHAIN,
 }
 
 export enum LiquidStakingToken {
@@ -136,16 +136,6 @@ export const PARACHAIN_CHAIN_MAP: Record<ParachainChainId, ParachainChainDef> =
 export const LIQUID_STAKING_CHAINS: ParachainChainDef[] =
   Object.values(PARACHAIN_CHAIN_MAP);
 
-// TODO: Instead of mapping to names, map to network/chain definitions themselves. This avoids redundancy and relies on a centralized definition for the network/chain which is better, since it simplifies future refactoring.
-export const LS_CHAIN_TO_NETWORK_NAME: Record<ParachainChainId, string> = {
-  [ParachainChainId.POLKADOT]: 'Polkadot Mainnet',
-  [ParachainChainId.PHALA]: 'Phala',
-  [ParachainChainId.MOONBEAM]: 'Moonbeam',
-  [ParachainChainId.ASTAR]: 'Astar',
-  [ParachainChainId.MANTA]: 'Manta',
-  [ParachainChainId.TANGLE_RESTAKING_PARACHAIN]: 'Tangle Parachain',
-};
-
 export const TVS_TOOLTIP =
   "Total Value Staked (TVS) refers to the total value of assets that are currently staked for this network in fiat currency. Generally used as an indicator of a network's security and trustworthiness.";