feat(tangle-dapp): Add Tangle local to LS networks

tangle-network · Sep 23, 2024 · fb89adc · fb89adc
1 parent fc6ace6
commit fb89adc
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 421 deletions.
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx
@@ -7,17 +7,16 @@ import {
   DropdownMenuItem,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import {
-  TANGLE_MAINNET_NETWORK,
-  TANGLE_TESTNET_NATIVE_NETWORK,
-} from '@webb-tools/webb-ui-components/constants/networks';
+import assert from 'assert';
 import { FC } from 'react';
 
+import { IS_PRODUCTION_ENV } from '../../../constants/env';
 import { LS_NETWORKS } from '../../../constants/liquidStaking/constants';
 import { LsNetworkId } from '../../../constants/liquidStaking/types';
 import { NETWORK_FEATURE_MAP } from '../../../constants/networks';
 import { NetworkFeature } from '../../../types';
 import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork';
+import getLsTangleNetwork from '../../../utils/liquidStaking/getLsTangleNetwork';
 import DropdownChevronIcon from './DropdownChevronIcon';
 
 type NetworkSelectorProps = {
@@ -53,19 +52,25 @@ const NetworkSelector: FC<NetworkSelectorProps> = ({
 
   // Filter out networks that don't support liquid staking yet.
   const supportedLsNetworks = LS_NETWORKS.filter((network) => {
-    if (network.id === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) {
+    // TODO: Check whether the restaking parachain supports liquid staking instead of hardcoding it.
+    if (network.id === LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
+      return true;
+    } else if (network.id === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) {
       return true;
     }
+    // Exclude the local Tangle network in production.
+    else if (network.id === LsNetworkId.TANGLE_LOCAL && IS_PRODUCTION_ENV) {
+      return false;
+    }
 
     // TODO: Obtain the Tangle network from the LS Network's properties instead.
-    const tangleNetwork =
-      network.id === LsNetworkId.TANGLE_MAINNET
-        ? TANGLE_MAINNET_NETWORK
-        : TANGLE_TESTNET_NATIVE_NETWORK;
+    const tangleNetwork = getLsTangleNetwork(network.id);
 
-    const networkFeatures = NETWORK_FEATURE_MAP[tangleNetwork.id];
+    assert(tangleNetwork !== null);
 
-    return networkFeatures.includes(NetworkFeature.LsPools);
+    return NETWORK_FEATURE_MAP[tangleNetwork.id].includes(
+      NetworkFeature.LsPools,
+    );
   });
 
   return setNetworkId !== undefined ? (

diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts
@@ -1,8 +1,5 @@
 import { useWebbUI } from '@webb-tools/webb-ui-components';
-import {
-  TANGLE_MAINNET_NETWORK,
-  TANGLE_TESTNET_NATIVE_NETWORK,
-} from '@webb-tools/webb-ui-components/constants/networks';
+import assert from 'assert';
 import { useCallback } from 'react';
 
 import { LsNetworkId } from '../../../constants/liquidStaking/types';
@@ -11,6 +8,7 @@ import useNetworkStore from '../../../context/useNetworkStore';
 import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import { NetworkFeature } from '../../../types';
 import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork';
+import getLsTangleNetwork from '../../../utils/liquidStaking/getLsTangleNetwork';
 import testRpcEndpointConnection from '../../NetworkSelector/testRpcEndpointConnection';
 
 const useLsChangeNetwork = () => {
@@ -35,10 +33,9 @@ const useLsChangeNetwork = () => {
         return;
       }
 
-      const tangleNetwork =
-        lsNetwork.id === LsNetworkId.TANGLE_MAINNET
-          ? TANGLE_MAINNET_NETWORK
-          : TANGLE_TESTNET_NATIVE_NETWORK;
+      const tangleNetwork = getLsTangleNetwork(newNetworkId);
+
+      assert(tangleNetwork !== null);
 
       const networkFeatures = NETWORK_FEATURE_MAP[tangleNetwork.id];
 

diff --git a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx
@@ -16,7 +16,6 @@ import {
   TooltipTrigger,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
 import { usePathname } from 'next/navigation';
 import { type FC, useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -99,11 +98,12 @@ const NetworkSelectionButton: FC = () => {
   // Network can't be switched from the Tangle Restaking Parachain while
   // on liquid staking page.
   else if (isInLiquidStakingPath) {
-    const liquidStakingNetworkName = isLiquifierProtocolId(selectedProtocolId)
+    // Special case when the liquifier is selected.
+    const lsNetworkName = isLiquifierProtocolId(selectedProtocolId)
       ? IS_PRODUCTION_ENV
         ? 'Ethereum Mainnet'
         : 'Sepolia Testnet'
-      : TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.name;
+      : networkName;
 
     const chainIconName = isLiquifierProtocolId(selectedProtocolId)
       ? 'ethereum'
@@ -115,7 +115,7 @@ const NetworkSelectionButton: FC = () => {
           <Dropdown>
             <TriggerButton
               className="opacity-60 cursor-not-allowed hover:!bg-none dark:hover:!bg-none"
-              networkName={liquidStakingNetworkName}
+              networkName={lsNetworkName}
               chainIconName={chainIconName}
               isLocked
             />

diff --git a/apps/tangle-dapp/constants/liquidStaking/constants.ts b/apps/tangle-dapp/constants/liquidStaking/constants.ts
@@ -6,6 +6,7 @@ import MOONBEAM from '../../data/liquidStaking/adapters/moonbeam';
 import PHALA from '../../data/liquidStaking/adapters/phala';
 import POLKADOT from '../../data/liquidStaking/adapters/polkadot';
 import POLYGON from '../../data/liquidStaking/adapters/polygon';
+import TANGLE_LOCAL from '../../data/liquidStaking/adapters/tangleLocal';
 import TANGLE_MAINNET from '../../data/liquidStaking/adapters/tangleMainnet';
 import TANGLE_TESTNET from '../../data/liquidStaking/adapters/tangleTestnet';
 import THE_GRAPH from '../../data/liquidStaking/adapters/theGraph';
@@ -54,6 +55,7 @@ export const LS_PROTOCOLS: LsProtocolDef[] = [
   ...Object.values(LS_LIQUIFIER_PROTOCOL_MAP),
   TANGLE_MAINNET,
   TANGLE_TESTNET,
+  TANGLE_LOCAL,
 ];
 
 export const LS_LIQUIFIER_PROTOCOL_IDS = [
@@ -99,25 +101,34 @@ export const LS_TANGLE_RESTAKING_PARACHAIN: LsNetwork = {
   protocols: [POLKADOT, PHALA, MOONBEAM, ASTAR, MANTA] as LsProtocolDef[],
 };
 
-export const LS_TANGLE_MAINNET: LsNetwork = {
+export const LS_TANGLE_MAINNET = {
   id: LsNetworkId.TANGLE_MAINNET,
   networkName: 'Tangle Mainnet',
   chainIconFileName: 'tangle',
   defaultProtocolId: LsProtocolId.TANGLE_MAINNET,
   protocols: [TANGLE_MAINNET],
-};
+} as const satisfies LsNetwork;
 
-export const LS_TANGLE_TESTNET: LsNetwork = {
+export const LS_TANGLE_TESTNET = {
   id: LsNetworkId.TANGLE_MAINNET,
   networkName: 'Tangle Testnet',
   chainIconFileName: 'tangle',
   defaultProtocolId: LsProtocolId.TANGLE_MAINNET,
   protocols: [TANGLE_MAINNET],
-};
+} as const satisfies LsNetwork;
+
+export const LS_TANGLE_LOCAL = {
+  id: LsNetworkId.TANGLE_LOCAL,
+  networkName: 'Tangle Local Dev',
+  chainIconFileName: 'tangle',
+  defaultProtocolId: LsProtocolId.TANGLE_LOCAL,
+  protocols: [TANGLE_LOCAL],
+} as const satisfies LsNetwork;
 
 export const LS_NETWORKS: LsNetwork[] = [
   LS_TANGLE_MAINNET,
   LS_TANGLE_TESTNET,
+  LS_TANGLE_LOCAL,
   LS_TANGLE_RESTAKING_PARACHAIN,
   LS_ETHEREUM_MAINNET_LIQUIFIER,
 ];

diff --git a/apps/tangle-dapp/constants/liquidStaking/types.ts b/apps/tangle-dapp/constants/liquidStaking/types.ts
@@ -9,12 +9,13 @@ import {
   LsNetworkEntityAdapter,
   ProtocolEntity,
 } from '../../data/liquidStaking/adapter';
-import { PolkadotValidator } from '../../data/liquidStaking/adapters/polkadot';
 import { SubstrateAddress } from '../../types/utils';
 import { CrossChainTimeUnit } from '../../utils/CrossChainTime';
 import {
+  TANGLE_LOCAL_DEV_NETWORK,
   TANGLE_MAINNET_NETWORK,
   TANGLE_TESTNET_NATIVE_NETWORK,
+  Network as TangleNetwork,
 } from '../../../../libs/webb-ui-components/src/constants/networks';
 
 export enum LsProtocolId {
@@ -29,6 +30,7 @@ export enum LsProtocolId {
   POLYGON,
   TANGLE_MAINNET,
   TANGLE_TESTNET,
+  TANGLE_LOCAL,
 }
 
 export type LsLiquifierProtocolId =
@@ -75,24 +77,29 @@ type ProtocolDefCommon = {
 };
 
 export enum LsNetworkId {
+  TANGLE_LOCAL,
   TANGLE_TESTNET,
   TANGLE_MAINNET,
   TANGLE_RESTAKING_PARACHAIN,
   ETHEREUM_MAINNET_LIQUIFIER,
 }
 
 export interface LsTangleNetworkDef extends ProtocolDefCommon {
-  networkId: LsNetworkId.TANGLE_MAINNET | LsNetworkId.TANGLE_TESTNET;
-  id: LsProtocolId.TANGLE_MAINNET | LsProtocolId.TANGLE_TESTNET;
+  networkId:
+    | LsNetworkId.TANGLE_MAINNET
+    | LsNetworkId.TANGLE_TESTNET
+    | LsNetworkId.TANGLE_LOCAL;
+  id:
+    | LsProtocolId.TANGLE_MAINNET
+    | LsProtocolId.TANGLE_TESTNET
+    | LsProtocolId.TANGLE_LOCAL;
   token: LsToken.TNT | LsToken.TTNT;
   rpcEndpoint: string;
   ss58Prefix:
     | typeof TANGLE_MAINNET_NETWORK.ss58Prefix
-    | typeof TANGLE_TESTNET_NATIVE_NETWORK.ss58Prefix;
-  adapter: LsNetworkEntityAdapter<PolkadotValidator>;
-  tangleNetwork:
-    | typeof TANGLE_MAINNET_NETWORK
-    | typeof TANGLE_TESTNET_NATIVE_NETWORK;
+    | typeof TANGLE_TESTNET_NATIVE_NETWORK.ss58Prefix
+    | typeof TANGLE_LOCAL_DEV_NETWORK.ss58Prefix;
+  tangleNetwork: TangleNetwork;
 }
 
 export interface LsParachainChainDef<T extends ProtocolEntity = ProtocolEntity>

diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx
@@ -0,0 +1,26 @@
+import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config';
+import { TANGLE_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
+
+import {
+  LsNetworkId,
+  LsProtocolId,
+  LsTangleNetworkDef,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+
+const TANGLE_LOCAL = {
+  networkId: LsNetworkId.TANGLE_LOCAL,
+  id: LsProtocolId.TANGLE_LOCAL,
+  name: 'Tangle Local',
+  token: LsToken.TTNT,
+  chainIconFileName: 'tangle',
+  decimals: TANGLE_TOKEN_DECIMALS,
+  rpcEndpoint: TANGLE_LOCAL_DEV_NETWORK.wsRpcEndpoint,
+  timeUnit: CrossChainTimeUnit.POLKADOT_ERA,
+  unstakingPeriod: 28,
+  ss58Prefix: TANGLE_LOCAL_DEV_NETWORK.ss58Prefix,
+  tangleNetwork: TANGLE_LOCAL_DEV_NETWORK,
+} as const satisfies LsTangleNetworkDef;
+
+export default TANGLE_LOCAL;