feat(tangle-dapp): Add Tangle mainnet & testnet networks to liquid staking

apps/tangle-dapp/app/liquid-staking/page.tsx

@@ -1,15 +1,18 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { LsValidatorTable } from '../../components/LiquidStaking/LsValidatorTable';
 import LsStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsStakeCard';
 import LsUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsUnstakeCard';
 import UnstakeRequestsTable from '../../components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable';
 import { LsSearchParamKey } from '../../constants/liquidStaking/types';
 import LsPoolsTable from '../../containers/LsPoolsTable';
+import useNetworkStore from '../../context/useNetworkStore';
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
+import useNetworkSwitcher from '../../hooks/useNetworkSwitcher';
 import useSearchParamState from '../../hooks/useSearchParamState';
+import getLsTangleNetwork from '../../utils/liquidStaking/getLsTangleNetwork';
 import isLsParachainChainId from '../../utils/liquidStaking/isLsParachainChainId';
 import TabListItem from '../restake/TabListItem';
 import TabsList from '../restake/TabsList';
@@ -28,10 +31,22 @@ const LiquidStakingTokenPage: FC = () => {
       value ? SearchParamAction.STAKE : SearchParamAction.UNSTAKE,
   });
 
-  const { selectedProtocolId } = useLsStore();
+  const { selectedProtocolId, selectedNetworkId } = useLsStore();
+  const { network } = useNetworkStore();
+  const { switchNetwork } = useNetworkSwitcher();
 
+  const lsTangleNetwork = getLsTangleNetwork(selectedNetworkId);
   const isParachainChain = isLsParachainChainId(selectedProtocolId);
 
+  // Sync the network with the selected liquid staking network on load.
+  // It might differ initially if the user navigates to the page and
+  // the active network differs from the default liquid staking network.
+  useEffect(() => {
+    if (lsTangleNetwork !== null && lsTangleNetwork.id !== network.id) {
+      switchNetwork(lsTangleNetwork, false);
+    }
+  }, [lsTangleNetwork, network.id, selectedNetworkId, switchNetwork]);
+
   return (
     <div className="flex flex-wrap gap-12">
       <div className="flex flex-col gap-4 w-full min-w-[450px] max-w-[600px]">

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

@@ -3,23 +3,21 @@ import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
-import { LsProtocolId, LsToken } from '../../../constants/liquidStaking/types';
+import { LsToken } from '../../../constants/liquidStaking/types';
 import { ExchangeRateType } from '../../../data/liquidStaking/useLsExchangeRate';
 import useLsExchangeRate from '../../../data/liquidStaking/useLsExchangeRate';
 import DetailItem from './DetailItem';
 
 export type ExchangeRateDetailItemProps = {
   type: ExchangeRateType;
   token: LsToken;
-  protocolId: LsProtocolId;
 };
 
 const ExchangeRateDetailItem: FC<ExchangeRateDetailItemProps> = ({
   type,
   token,
-  protocolId,
 }) => {
-  const { exchangeRate, isRefreshing } = useLsExchangeRate(type, protocolId);
+  const { exchangeRate, isRefreshing } = useLsExchangeRate(type);
 
   const exchangeRateElement =
     exchangeRate instanceof Error ? (

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

@@ -1,6 +1,7 @@
 import { BN, BN_ZERO } from '@polkadot/util';
 import { FC, useMemo } from 'react';
 
+import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import { LsProtocolId } from '../../../constants/liquidStaking/types';
 import formatBn from '../../../utils/formatBn';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
@@ -36,6 +37,8 @@ const FeeDetailItem: FC<FeeDetailItemProps> = ({
     // Propagate error or loading state.
     if (!(feeAmount instanceof BN)) {
       return feeAmount;
+    } else if (feeAmount.isZero()) {
+      return EMPTY_VALUE_PLACEHOLDER;
     }
 
     const formattedAmount = formatBn(feeAmount, protocol.decimals, {

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

@@ -13,32 +13,29 @@ import { twMerge } from 'tailwind-merge';
 
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
-import {
-  LsNetworkId,
-  LsProtocolId,
-} from '../../../constants/liquidStaking/types';
+import { LsNetworkId } from '../../../constants/liquidStaking/types';
+import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import formatBn from '../../../utils/formatBn';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
 import useLsAgnosticBalance from './useLsAgnosticBalance';
 
 export type LsAgnosticBalanceProps = {
   isNative?: boolean;
-  protocolId: LsProtocolId;
   tooltip?: string;
   onlyShowTooltipWhenBalanceIsSet?: boolean;
   onClick?: () => void;
 };
 
 const LsAgnosticBalance: FC<LsAgnosticBalanceProps> = ({
   isNative = true,
-  protocolId,
   tooltip,
   onlyShowTooltipWhenBalanceIsSet = true,
   onClick,
 }) => {
   const [isHovering, setIsHovering] = useState(false);
-  const { balance, isRefreshing } = useLsAgnosticBalance(isNative, protocolId);
-  const protocol = getLsProtocolDef(protocolId);
+  const { balance, isRefreshing } = useLsAgnosticBalance(isNative);
+  const { selectedProtocolId } = useLsStore();
+  const protocol = getLsProtocolDef(selectedProtocolId);
 
   // Special case for liquid tokens on the `TgToken.sol` contract.
   // See: https://github.com/webb-tools/tnt-core/blob/1f371959884352e7af68e6091c5bb330fcaa58b8/src/lst/liquidtoken/TgToken.sol#L26
@@ -58,7 +55,6 @@ const LsAgnosticBalance: FC<LsAgnosticBalanceProps> = ({
     }
 
     const formattedBalance = formatBn(balance, decimals, {
-      fractionMaxLength: undefined,
       includeCommas: true,
     });
 

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

@@ -13,7 +13,7 @@ import {
   Input,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
 import { z } from 'zod';
 
 import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
@@ -22,11 +22,12 @@ import {
   LsProtocolId,
   LsSearchParamKey,
 } from '../../../constants/liquidStaking/types';
+import useMintTx from '../../../data/liquidStaking/parachain/useMintTx';
+import useLsPoolJoinTx from '../../../data/liquidStaking/tangle/useLsPoolJoinTx';
 import useLsExchangeRate, {
   ExchangeRateType,
 } from '../../../data/liquidStaking/useLsExchangeRate';
 import { useLsStore } from '../../../data/liquidStaking/useLsStore';
-import useMintTx from '../../../data/liquidStaking/useMintTx';
 import useLiquifierDeposit from '../../../data/liquifier/useLiquifierDeposit';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
 import useSearchParamState from '../../../hooks/useSearchParamState';
@@ -40,6 +41,7 @@ import LsFeeWarning from './LsFeeWarning';
 import LsInput from './LsInput';
 import TotalDetailItem from './TotalDetailItem';
 import UnstakePeriodDetailItem from './UnstakePeriodDetailItem';
+import useLsChangeNetwork from './useLsChangeNetwork';
 import useLsSpendingLimits from './useLsSpendingLimits';
 
 const LsStakeCard: FC = () => {
@@ -54,10 +56,15 @@ const LsStakeCard: FC = () => {
     selectedProtocolId,
     setSelectedProtocolId,
     selectedNetworkId,
-    setSelectedNetworkId,
+    selectedPoolId,
   } = useLsStore();
 
-  const { execute: executeMintTx, status: mintTxStatus } = useMintTx();
+  const { execute: executeTanglePoolJoinTx, status: tanglePoolJoinTxStatus } =
+    useLsPoolJoinTx();
+
+  const { execute: executeParachainMintTx, status: parachainMintTxStatus } =
+    useMintTx();
+
   const performLiquifierDeposit = useLiquifierDeposit();
   const activeAccountAddress = useActiveAccountAddress();
 
@@ -67,6 +74,12 @@ const LsStakeCard: FC = () => {
   );
 
   const selectedProtocol = getLsProtocolDef(selectedProtocolId);
+  const tryChangeNetwork = useLsChangeNetwork();
+
+  const isTangleNetwork =
+    selectedNetworkId === LsNetworkId.TANGLE_LOCAL ||
+    selectedNetworkId === LsNetworkId.TANGLE_MAINNET ||
+    selectedNetworkId === LsNetworkId.TANGLE_TESTNET;
 
   // TODO: Not loading the correct protocol for: '?amount=123000000000000000000&protocol=7&network=1&action=stake'. When network=1, it switches to protocol=5 on load. Could this be because the protocol is reset to its default once the network is switched?
   useSearchParamSync({
@@ -82,16 +95,13 @@ const LsStakeCard: FC = () => {
     value: selectedNetworkId,
     parse: (value) => z.nativeEnum(LsNetworkId).parse(parseInt(value)),
     stringify: (value) => value.toString(),
-    setValue: setSelectedNetworkId,
+    setValue: tryChangeNetwork,
   });
 
   const {
     exchangeRate: exchangeRateOrError,
     isRefreshing: isRefreshingExchangeRate,
-  } = useLsExchangeRate(
-    ExchangeRateType.NativeToDerivative,
-    selectedProtocolId,
-  );
+  } = useLsExchangeRate(ExchangeRateType.NativeToDerivative);
 
   // TODO: Properly handle the error state.
   const exchangeRate =
@@ -105,9 +115,9 @@ const LsStakeCard: FC = () => {
 
     if (
       selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
-      executeMintTx !== null
+      executeParachainMintTx !== null
     ) {
-      executeMintTx({
+      executeParachainMintTx({
         amount: fromAmount,
         currency: selectedProtocol.currency,
       });
@@ -116,8 +126,25 @@ const LsStakeCard: FC = () => {
       performLiquifierDeposit !== null
     ) {
       await performLiquifierDeposit(selectedProtocol.id, fromAmount);
+    } else if (
+      isTangleNetwork &&
+      executeTanglePoolJoinTx !== null &&
+      selectedPoolId !== null
+    ) {
+      executeTanglePoolJoinTx({
+        amount: fromAmount,
+        poolId: selectedPoolId,
+      });
     }
-  }, [executeMintTx, fromAmount, performLiquifierDeposit, selectedProtocol]);
+  }, [
+    executeParachainMintTx,
+    executeTanglePoolJoinTx,
+    fromAmount,
+    isTangleNetwork,
+    performLiquifierDeposit,
+    selectedProtocol,
+    selectedPoolId,
+  ]);
 
   const toAmount = useMemo(() => {
     if (fromAmount === null || exchangeRate === null) {
@@ -130,13 +157,15 @@ const LsStakeCard: FC = () => {
   const canCallStake =
     (fromAmount !== null &&
       selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
-      executeMintTx !== null) ||
+      executeParachainMintTx !== null) ||
     (selectedProtocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER &&
-      performLiquifierDeposit !== null);
+      performLiquifierDeposit !== null) ||
+    (isTangleNetwork &&
+      executeTanglePoolJoinTx !== null &&
+      selectedPoolId !== null);
 
   const walletBalance = (
     <LsAgnosticBalance
-      protocolId={selectedProtocolId}
       tooltip="Click to use all available balance"
       onClick={() => {
         if (maxSpendable !== null) {
@@ -146,6 +175,11 @@ const LsStakeCard: FC = () => {
     />
   );
 
+  // Reset the input amount when the network changes.
+  useEffect(() => {
+    setFromAmount(null);
+  }, [setFromAmount, selectedNetworkId]);
+
   return (
     <>
       <LsInput
@@ -161,7 +195,7 @@ const LsStakeCard: FC = () => {
         setProtocolId={setSelectedProtocolId}
         minAmount={minSpendable ?? undefined}
         maxAmount={maxSpendable ?? undefined}
-        setNetworkId={setSelectedNetworkId}
+        setNetworkId={tryChangeNetwork}
       />
 
       <ArrowDownIcon className="dark:fill-mono-0 self-center w-7 h-7" />
@@ -184,7 +218,6 @@ const LsStakeCard: FC = () => {
         <UnstakePeriodDetailItem protocolId={selectedProtocolId} />
 
         <ExchangeRateDetailItem
-          protocolId={selectedProtocolId}
           token={selectedProtocol.token}
           type={ExchangeRateType.NativeToDerivative}
         />
@@ -213,7 +246,10 @@ const LsStakeCard: FC = () => {
           fromAmount === null ||
           fromAmount.isZero()
         }
-        isLoading={mintTxStatus === TxStatus.PROCESSING}
+        isLoading={
+          parachainMintTxStatus === TxStatus.PROCESSING ||
+          tanglePoolJoinTxStatus === TxStatus.PROCESSING
+        }
         loadingText="Processing"
         onClick={handleStakeClick}
         isFullWidth