diff --git a/apps/tangle-dapp/app/liquid-staking/page.tsx b/apps/tangle-dapp/app/liquid-staking/page.tsx
index 52a63e562c..f3a67f350a 100644
--- a/apps/tangle-dapp/app/liquid-staking/page.tsx
+++ b/apps/tangle-dapp/app/liquid-staking/page.tsx
@@ -2,15 +2,12 @@
 
 import { FC } from 'react';
 
-import { LiquidStakingSelectionTable } from '../../components/LiquidStaking/LiquidStakingSelectionTable';
-import LiquidStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LiquidStakeCard';
-import LiquidUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard';
-import UnlockNftsTable from '../../components/LiquidStaking/unlockNftsTable/UnlockNftsTable';
+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 { useLiquidStakingStore } from '../../data/liquidStaking/useLiquidStakingStore';
 import useSearchParamState from '../../hooks/useSearchParamState';
-import isLsParachainChainId from '../../utils/liquidStaking/isLsParachainChainId';
 import TabListItem from '../restake/TabListItem';
 import TabsList from '../restake/TabsList';
 
@@ -28,8 +25,6 @@ const LiquidStakingTokenPage: FC = () => {
       value ? SearchParamAction.STAKE : SearchParamAction.UNSTAKE,
   });
 
-  const { selectedProtocolId } = useLiquidStakingStore();
-
   return (
     <div className="flex flex-wrap gap-12">
       <div className="flex flex-col gap-4 w-full min-w-[450px] max-w-[600px]">
@@ -46,17 +41,11 @@ const LiquidStakingTokenPage: FC = () => {
           </TabListItem>
         </TabsList>
 
-        {isStaking ? <LiquidStakeCard /> : <LiquidUnstakeCard />}
+        {isStaking ? <LsStakeCard /> : <LsUnstakeCard />}
       </div>
 
       <div className="flex flex-col flex-grow w-min gap-4 min-w-[370px]">
-        {isStaking ? (
-          <LiquidStakingSelectionTable />
-        ) : isLsParachainChainId(selectedProtocolId) ? (
-          <UnstakeRequestsTable />
-        ) : (
-          <UnlockNftsTable tokenId={selectedProtocolId} />
-        )}
+        {isStaking ? <LsValidatorTable /> : <UnstakeRequestsTable />}
       </div>
     </div>
   );
diff --git a/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx b/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
index 934be15aa0..6faf77969f 100644
--- a/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
@@ -18,6 +18,7 @@ const ExternalLink: FC<ExternalLinkProps> = ({
     <Button
       className="group"
       href={href}
+      target="_blank"
       size="sm"
       variant="link"
       rightIcon={
diff --git a/apps/tangle-dapp/components/LiquidStaking/LiquidStakingSelectionTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
similarity index 88%
rename from apps/tangle-dapp/components/LiquidStaking/LiquidStakingSelectionTable.tsx
rename to apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
index 2560cc13a1..e4666e6ede 100644
--- a/apps/tangle-dapp/components/LiquidStaking/LiquidStakingSelectionTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
@@ -24,9 +24,9 @@ import {
 } from '@webb-tools/webb-ui-components';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import useLiquidStakingItems from '../../data/liquidStaking/useLiquidStakingItems';
-import { useLiquidStakingStore } from '../../data/liquidStaking/useLiquidStakingStore';
-import { useLiquidStakingSelectionTableColumns } from '../../hooks/LiquidStaking/useLiquidStakingSelectionTableColumns';
+import { useLsStore } from '../../data/liquidStaking/useLsStore';
+import useLsValidators from '../../data/liquidStaking/useLsValidators';
+import { useLsValidatorSelectionTableColumns } from '../../data/liquidStaking/useLsValidatorSelectionTableColumns';
 import {
   LiquidStakingItem,
   LiquidStakingItemType,
@@ -42,20 +42,16 @@ const SELECTED_ITEMS_COLUMN_SORT = {
   desc: false,
 } as const satisfies ColumnSort;
 
-export const LiquidStakingSelectionTable = () => {
-  const selectedChainId = useLiquidStakingStore(
-    (state) => state.selectedProtocolId,
-  );
-  const setSelectedItems = useLiquidStakingStore(
-    (state) => state.setSelectedItems,
-  );
-  const { isLoading, data, dataType } = useLiquidStakingItems(selectedChainId);
-
+export const LsValidatorTable = () => {
+  const { selectedProtocolId, setSelectedItems } = useLsStore();
+  const { isLoading, data, dataType } = useLsValidators(selectedProtocolId);
   const [searchValue, setSearchValue] = useState('');
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
   const [sorting, setSorting] = useState<SortingState>([
     SELECTED_ITEMS_COLUMN_SORT,
   ]);
+
   const [pagination, setPagination] =
     useState<PaginationState>(DEFAULT_PAGINATION);
 
@@ -67,7 +63,7 @@ export const LiquidStakingSelectionTable = () => {
     setSelectedItems(new Set(Object.keys(rowSelection)));
   }, [rowSelection, setSelectedItems]);
 
-  const columns = useLiquidStakingSelectionTableColumns(
+  const columns = useLsValidatorSelectionTableColumns(
     toggleSortSelectionHandlerRef,
     dataType,
   ) as ColumnDef<LiquidStakingItemType, unknown>[];
@@ -99,15 +95,18 @@ export const LiquidStakingSelectionTable = () => {
   }, [dataType]);
 
   const tableData = useMemo(() => (isLoading ? [] : data), [data, isLoading]);
+
   const tableColumns = useMemo(
     () => (isLoading ? [] : columns),
     [columns, isLoading],
   );
 
   const tableIsLoading = useMemo(() => {
-    return (
-      (data.length > 0 && data[0].itemType !== dataType) || isLoading === true
-    );
+    if (isLoading) {
+      return true;
+    }
+
+    return data.length > 0 && data[0].itemType !== dataType;
   }, [data, dataType, isLoading]);
 
   const tableProps = useMemo<TableOptions<LiquidStakingItemType>>(
@@ -136,6 +135,7 @@ export const LiquidStakingSelectionTable = () => {
             typeof updaterOrValue === 'function'
               ? updaterOrValue(prev)
               : updaterOrValue;
+
           return newSorting.length === 0
             ? [SELECTED_ITEMS_COLUMN_SORT]
             : newSorting[0].id === 'id'
@@ -183,11 +183,11 @@ export const LiquidStakingSelectionTable = () => {
               </Typography>
 
               <Input
-                id="search"
+                id="ls-validator-selection-search"
                 rightIcon={<Search className="mr-2" />}
                 placeholder="Search"
                 value={searchValue}
-                onChange={(val) => setSearchValue(val)}
+                onChange={(newSearchValue) => setSearchValue(newSearchValue)}
                 className="mb-1"
                 debounceTime={300}
               />
@@ -224,6 +224,7 @@ export const LiquidStakingSelectionTable = () => {
           <div className="flex justify-center items-center min-h-[600px]">
             <div className="flex items-center justify-center gap-1">
               <Spinner size="md" />
+
               <Typography
                 variant="body1"
                 fw="normal"
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
index 7ced70e2a7..a6e3a876ca 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
@@ -1,11 +1,20 @@
 import { InformationLine } from '@webb-tools/icons';
-import { IconWithTooltip, Typography } from '@webb-tools/webb-ui-components';
+import {
+  Chip,
+  GITHUB_BUG_REPORT_URL,
+  IconWithTooltip,
+  InfoIconWithTooltip,
+  SkeletonLoader,
+  Typography,
+} from '@webb-tools/webb-ui-components';
 import { FC, ReactNode } from 'react';
 
+import ExternalLink from '../ExternalLink';
+
 type DetailItemProps = {
   title: string;
   tooltip?: string;
-  value: ReactNode | string;
+  value: Error | ReactNode | string | null;
 };
 
 const DetailItem: FC<DetailItemProps> = ({ title, tooltip, value }) => {
@@ -33,6 +42,10 @@ const DetailItem: FC<DetailItemProps> = ({ title, tooltip, value }) => {
         <Typography className="dark:text-mono-0" variant="body1" fw="bold">
           {value}
         </Typography>
+      ) : value === null ? (
+        <SkeletonLoader className="max-w-[80px]" />
+      ) : value instanceof Error ? (
+        <ErrorChip error={value} />
       ) : (
         value
       )}
@@ -40,4 +53,27 @@ const DetailItem: FC<DetailItemProps> = ({ title, tooltip, value }) => {
   );
 };
 
+/** @internal */
+const ErrorChip: FC<{ error: Error }> = ({ error }) => {
+  return (
+    <Chip color="red">
+      Error{' '}
+      <InfoIconWithTooltip
+        className="dark:fill-red-400 fill-red-400"
+        content={
+          <>
+            <Typography variant="body1">
+              {error.name}: {error.message}
+            </Typography>
+
+            <ExternalLink href={GITHUB_BUG_REPORT_URL}>
+              Report issue
+            </ExternalLink>
+          </>
+        }
+      />
+    </Chip>
+  );
+};
+
 export default DetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx
index f42accbcc6..6ebb815d88 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx
@@ -1,10 +1,11 @@
 import { SkeletonLoader } from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
 
-import { LST_PREFIX } from '../../../constants/liquidStaking/constants';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
 import { LsProtocolId, LsToken } from '../../../constants/liquidStaking/types';
-import { ExchangeRateType } from '../../../data/liquidStaking/useExchangeRate';
-import useExchangeRate from '../../../data/liquidStaking/useExchangeRate';
+import { ExchangeRateType } from '../../../data/liquidStaking/useLsExchangeRate';
+import useLsExchangeRate from '../../../data/liquidStaking/useLsExchangeRate';
 import DetailItem from './DetailItem';
 
 export type ExchangeRateDetailItemProps = {
@@ -18,28 +19,33 @@ const ExchangeRateDetailItem: FC<ExchangeRateDetailItemProps> = ({
   token,
   protocolId,
 }) => {
-  const { exchangeRate, isRefreshing } = useExchangeRate(type, protocolId);
+  const { exchangeRate, isRefreshing } = useLsExchangeRate(type, protocolId);
 
   const exchangeRateElement =
-    exchangeRate === null ? (
+    exchangeRate instanceof Error ? (
+      exchangeRate
+    ) : exchangeRate === null ? (
       <SkeletonLoader className="w-[50px]" />
-    ) : isRefreshing ? (
-      <div className="animate-pulse">{exchangeRate}</div>
     ) : (
       exchangeRate
     );
 
-  return (
-    <DetailItem
-      title="Rate"
-      value={
-        <div className="flex gap-1 items-center justify-center whitespace-nowrap">
-          1 {token} = {exchangeRateElement} {LST_PREFIX}
-          {token}
-        </div>
-      }
-    />
-  );
+  const value =
+    exchangeRateElement instanceof Error ? (
+      exchangeRateElement
+    ) : (
+      <div
+        className={twMerge(
+          'flex gap-1 items-center justify-center whitespace-nowrap',
+          isRefreshing && 'animate-pulse',
+        )}
+      >
+        1 {token} = {exchangeRateElement} {LS_DERIVATIVE_TOKEN_PREFIX}
+        {token}
+      </div>
+    );
+
+  return <DetailItem title="Rate" value={value} />;
 };
 
 export default ExchangeRateDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx
new file mode 100644
index 0000000000..a597e6e655
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx
@@ -0,0 +1,58 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { FC, useMemo } from 'react';
+
+import { LsProtocolId } from '../../../constants/liquidStaking/types';
+import formatBn from '../../../utils/formatBn';
+import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+import scaleAmountByPermill from '../../../utils/scaleAmountByPermill';
+import DetailItem from './DetailItem';
+import useLsFeePermill from './useLsFeePermill';
+
+export type FeeDetailItemProps = {
+  isMinting: boolean;
+  inputAmount: BN | null;
+  protocolId: LsProtocolId;
+};
+
+const FeeDetailItem: FC<FeeDetailItemProps> = ({
+  isMinting,
+  inputAmount,
+  protocolId,
+}) => {
+  const feePermill = useLsFeePermill(protocolId, isMinting);
+
+  const protocol = getLsProtocolDef(protocolId);
+
+  // TODO: Add liquifier fees, and select either parachain or liquifier fees based on the given protocol's id.
+
+  const feeAmount = useMemo(() => {
+    // Propagate error or loading state.
+    if (typeof feePermill !== 'number') {
+      return feePermill;
+    }
+
+    return scaleAmountByPermill(inputAmount ?? BN_ZERO, feePermill);
+  }, [feePermill, inputAmount]);
+
+  const formattedFeeAmount = useMemo(() => {
+    // Propagate error or loading state.
+    if (!(feeAmount instanceof BN)) {
+      return feeAmount;
+    }
+
+    const formattedAmount = formatBn(feeAmount, protocol.decimals, {
+      includeCommas: true,
+    });
+
+    return `${formattedAmount} ${protocol.token}`;
+  }, [feeAmount, protocol.decimals, protocol.token]);
+
+  const feeTitle =
+    typeof feePermill !== 'number'
+      ? 'Fee'
+      : `Fee (${(feePermill * 100).toFixed(2)}%)`;
+
+  return <DetailItem title={feeTitle} value={formattedFeeAmount} />;
+};
+
+export default FeeDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx
deleted file mode 100644
index cc6a79a37e..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-'use client';
-
-import { BN } from '@polkadot/util';
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import { ChainIcon } from '@webb-tools/icons';
-import {
-  Dropdown,
-  DropdownBody,
-  DropdownMenuItem,
-  Typography,
-} from '@webb-tools/webb-ui-components';
-import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
-import { FC, ReactNode, useEffect } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import { LST_PREFIX } from '../../../constants/liquidStaking/constants';
-import { LsProtocolId, LsToken } from '../../../constants/liquidStaking/types';
-import { ERROR_NOT_ENOUGH_BALANCE } from '../../../containers/ManageProfileModalContainer/Independent/IndependentAllocationInput';
-import useInputAmount from '../../../hooks/useInputAmount';
-import formatBn from '../../../utils/formatBn';
-import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import DropdownChevronIcon from './DropdownChevronIcon';
-import TokenChip from './TokenChip';
-
-export type LiquidStakingInputProps = {
-  id: string;
-  protocolId: LsProtocolId;
-  decimals: number;
-  amount: BN | null;
-  isReadOnly?: boolean;
-  placeholder?: string;
-  rightElement?: ReactNode;
-  token: LsToken;
-  isTokenLiquidVariant?: boolean;
-  minAmount?: BN;
-  maxAmount?: BN;
-  maxErrorMessage?: string;
-  onAmountChange?: (newAmount: BN | null) => void;
-  setChainId?: (newChain: LsProtocolId) => void;
-  onTokenClick?: () => void;
-};
-
-const LiquidStakingInput: FC<LiquidStakingInputProps> = ({
-  id,
-  amount,
-  decimals,
-  isReadOnly = false,
-  placeholder = '0',
-  isTokenLiquidVariant = false,
-  rightElement,
-  protocolId,
-  token,
-  minAmount,
-  maxAmount,
-  maxErrorMessage = ERROR_NOT_ENOUGH_BALANCE,
-  onAmountChange,
-  setChainId,
-  onTokenClick,
-}) => {
-  const minErrorMessage = ((): string | undefined => {
-    if (minAmount === undefined) {
-      return undefined;
-    }
-
-    const unit = `${isTokenLiquidVariant ? LST_PREFIX : ''}${token}`;
-
-    const formattedMinAmount = formatBn(minAmount, decimals, {
-      fractionMaxLength: undefined,
-      includeCommas: true,
-    });
-
-    return `Amount must be at least ${formattedMinAmount} ${unit}`;
-  })();
-
-  const { displayAmount, handleChange, errorMessage, setDisplayAmount } =
-    useInputAmount({
-      amount,
-      setAmount: onAmountChange,
-      decimals,
-      min: minAmount,
-      minErrorMessage,
-      max: maxAmount,
-      maxErrorMessage,
-    });
-
-  // Update the display amount when the amount prop changes.
-  // Only do this for controlled (read-only) inputs.
-  useEffect(() => {
-    if (amount !== null) {
-      setDisplayAmount(amount);
-    }
-  }, [amount, setDisplayAmount]);
-
-  const isError = errorMessage !== null;
-
-  return (
-    <>
-      <div
-        className={twMerge(
-          'flex flex-col gap-3 bg-mono-20 dark:bg-mono-180 p-3 rounded-lg border border-mono-40 dark:border-mono-160',
-          isError && 'border-red-70 dark:border-red-50',
-        )}
-      >
-        <div className="flex justify-between">
-          <ProtocolSelector
-            selectedProtocolId={protocolId}
-            setProtocolId={setChainId}
-          />
-
-          {rightElement}
-        </div>
-
-        <hr className="dark:border-mono-160" />
-
-        <div className="flex gap-1">
-          <input
-            id={id}
-            className="w-full bg-transparent border-none text-xl font-bold outline-none focus:ring-0"
-            type="text"
-            placeholder={placeholder}
-            value={displayAmount}
-            onChange={(e) => handleChange(e.target.value)}
-            readOnly={isReadOnly}
-          />
-
-          <TokenChip
-            onClick={onTokenClick}
-            token={token}
-            isLiquidVariant={isTokenLiquidVariant}
-          />
-        </div>
-      </div>
-
-      {errorMessage !== null && (
-        <Typography variant="body2" className="text-red-70 dark:text-red-50">
-          * {errorMessage}
-        </Typography>
-      )}
-    </>
-  );
-};
-
-type ProtocolSelectorProps = {
-  selectedProtocolId: LsProtocolId;
-
-  /**
-   * If this function is not provided, the selector will be
-   * considered read-only.
-   */
-  setProtocolId?: (newProtocolId: LsProtocolId) => void;
-};
-
-/** @internal */
-const ProtocolSelector: FC<ProtocolSelectorProps> = ({
-  selectedProtocolId,
-  setProtocolId,
-}) => {
-  const selectedProtocol = getLsProtocolDef(selectedProtocolId);
-  const isReadOnly = setProtocolId === undefined;
-
-  const base = (
-    <div className="group flex gap-1 items-center justify-center">
-      <div className="flex gap-2 items-center justify-center">
-        <ChainIcon size="lg" name={selectedProtocol.chainIconFileName} />
-
-        <Typography variant="h5" fw="bold" className="dark:text-mono-40">
-          {selectedProtocol.name}
-        </Typography>
-      </div>
-
-      {!isReadOnly && <DropdownChevronIcon isLarge />}
-    </div>
-  );
-
-  return setProtocolId !== undefined ? (
-    <Dropdown>
-      <DropdownMenuTrigger>{base}</DropdownMenuTrigger>
-
-      <DropdownBody>
-        <ScrollArea>
-          <ul className="max-h-[300px]">
-            {Object.values(LsProtocolId)
-              .filter(
-                (protocolId): protocolId is LsProtocolId =>
-                  protocolId !== selectedProtocolId &&
-                  typeof protocolId !== 'string',
-              )
-              .map((protocolId) => {
-                const protocol = getLsProtocolDef(protocolId);
-
-                return (
-                  <li key={protocolId} className="w-full">
-                    <DropdownMenuItem
-                      leftIcon={
-                        <ChainIcon
-                          size="lg"
-                          name={protocol.chainIconFileName}
-                        />
-                      }
-                      onSelect={() => setProtocolId(protocolId)}
-                      className="px-3 normal-case"
-                    >
-                      {protocol.name}
-                    </DropdownMenuItem>
-                  </li>
-                );
-              })}
-          </ul>
-        </ScrollArea>
-      </DropdownBody>
-    </Dropdown>
-  ) : (
-    base
-  );
-};
-
-export default LiquidStakingInput;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/AgnosticLsBalance.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
similarity index 76%
rename from apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/AgnosticLsBalance.tsx
rename to apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
index 39f26b9435..8e185181ce 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/AgnosticLsBalance.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
@@ -12,12 +12,16 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
-import { LsProtocolId } from '../../../constants/liquidStaking/types';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
+import {
+  LsNetworkId,
+  LsProtocolId,
+} from '../../../constants/liquidStaking/types';
 import formatBn from '../../../utils/formatBn';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import useAgnosticLsBalance from './useAgnosticLsBalance';
+import useLsAgnosticBalance from './useLsAgnosticBalance';
 
-export type AgnosticLsBalanceProps = {
+export type LsAgnosticBalanceProps = {
   isNative?: boolean;
   protocolId: LsProtocolId;
   tooltip?: string;
@@ -25,7 +29,7 @@ export type AgnosticLsBalanceProps = {
   onClick?: () => void;
 };
 
-const AgnosticLsBalance: FC<AgnosticLsBalanceProps> = ({
+const LsAgnosticBalance: FC<LsAgnosticBalanceProps> = ({
   isNative = true,
   protocolId,
   tooltip,
@@ -33,29 +37,35 @@ const AgnosticLsBalance: FC<AgnosticLsBalanceProps> = ({
   onClick,
 }) => {
   const [isHovering, setIsHovering] = useState(false);
-  const balance = useAgnosticLsBalance(isNative, protocolId);
+  const { balance, isRefreshing } = useLsAgnosticBalance(isNative, protocolId);
   const protocol = getLsProtocolDef(protocolId);
 
   // 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
   const decimals =
-    !isNative && protocol.type === 'erc20' ? 18 : protocol.decimals;
+    !isNative && protocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER
+      ? 18
+      : protocol.decimals;
 
   const formattedBalance = useMemo(() => {
     // No account is active; display a placeholder instead of a loading state.
     if (balance === EMPTY_VALUE_PLACEHOLDER) {
-      return balance;
+      return EMPTY_VALUE_PLACEHOLDER;
     }
     // Balance is still loading.
     else if (balance === null) {
       return null;
     }
 
-    return formatBn(balance, decimals, {
+    const formattedBalance = formatBn(balance, decimals, {
       fractionMaxLength: undefined,
       includeCommas: true,
     });
-  }, [balance, decimals]);
+
+    const derivativePrefix = isNative ? '' : LS_DERIVATIVE_TOKEN_PREFIX;
+
+    return `${formattedBalance} ${derivativePrefix}${protocol.token}`;
+  }, [balance, decimals, isNative, protocol.token]);
 
   const isClickable =
     onlyShowTooltipWhenBalanceIsSet &&
@@ -79,6 +89,7 @@ const AgnosticLsBalance: FC<AgnosticLsBalanceProps> = ({
       className={twMerge(
         'group flex gap-1 items-center justify-center',
         isClickable && 'cursor-pointer',
+        isRefreshing && 'animate-pulse',
       )}
     >
       {isHovering && isClickable ? (
@@ -122,4 +133,4 @@ const AgnosticLsBalance: FC<AgnosticLsBalanceProps> = ({
   );
 };
 
-export default AgnosticLsBalance;
+export default LsAgnosticBalance;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx
new file mode 100644
index 0000000000..4c143b8caf
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx
@@ -0,0 +1,30 @@
+import { Alert } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
+
+import { LsProtocolId } from '../../../constants/liquidStaking/types';
+import useLsFeePermill from './useLsFeePermill';
+
+// 10%.
+const THRESHOLD_PERMILL = 0.1;
+
+export type LsFeeWarningProps = {
+  isMinting: boolean;
+  selectedProtocolId: LsProtocolId;
+};
+
+const LsFeeWarning: FC<LsFeeWarningProps> = ({ selectedProtocolId }) => {
+  const fee = useLsFeePermill(selectedProtocolId, true);
+
+  return (
+    typeof fee === 'number' &&
+    fee >= THRESHOLD_PERMILL && (
+      <Alert
+        type="warning"
+        title="High fees"
+        description="The fee for liquid staking this asset is higher than 10% of the amount."
+      />
+    )
+  );
+};
+
+export default LsFeeWarning;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx
new file mode 100644
index 0000000000..a6b04a8360
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { BN } from '@polkadot/util';
+import { Typography } from '@webb-tools/webb-ui-components';
+import { FC, ReactNode, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
+import {
+  LsNetworkId,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { ERROR_NOT_ENOUGH_BALANCE } from '../../../containers/ManageProfileModalContainer/Independent/IndependentAllocationInput';
+import useInputAmount from '../../../hooks/useInputAmount';
+import formatBn from '../../../utils/formatBn';
+import NetworkSelector from './NetworkSelector';
+import ProtocolSelector from './ProtocolSelector';
+
+export type LsInputProps = {
+  id: string;
+  networkId: LsNetworkId;
+  protocolId: LsProtocolId;
+  decimals: number;
+  amount: BN | null;
+  isReadOnly?: boolean;
+  placeholder?: string;
+  rightElement?: ReactNode;
+  token: LsToken;
+  isDerivativeVariant?: boolean;
+  minAmount?: BN;
+  maxAmount?: BN;
+  maxErrorMessage?: string;
+  className?: string;
+  onAmountChange?: (newAmount: BN | null) => void;
+  setProtocolId?: (newProtocolId: LsProtocolId) => void;
+  setNetworkId?: (newNetworkId: LsNetworkId) => void;
+  onTokenClick?: () => void;
+};
+
+const LsInput: FC<LsInputProps> = ({
+  id,
+  amount,
+  decimals,
+  isReadOnly = false,
+  placeholder = '0',
+  isDerivativeVariant = false,
+  rightElement,
+  protocolId,
+  networkId,
+  token,
+  minAmount,
+  maxAmount,
+  maxErrorMessage = ERROR_NOT_ENOUGH_BALANCE,
+  onAmountChange,
+  setProtocolId,
+  setNetworkId,
+  className,
+}) => {
+  const minErrorMessage = ((): string | undefined => {
+    if (minAmount === undefined) {
+      return undefined;
+    }
+
+    const unit = `${isDerivativeVariant ? LS_DERIVATIVE_TOKEN_PREFIX : ''}${token}`;
+
+    const formattedMinAmount = formatBn(minAmount, decimals, {
+      fractionMaxLength: undefined,
+      includeCommas: true,
+    });
+
+    return `Amount must be at least ${formattedMinAmount} ${unit}`;
+  })();
+
+  const { displayAmount, handleChange, errorMessage, setDisplayAmount } =
+    useInputAmount({
+      amount,
+      setAmount: onAmountChange,
+      decimals,
+      min: minAmount,
+      minErrorMessage,
+      max: maxAmount,
+      maxErrorMessage,
+    });
+
+  // Update the display amount when the amount prop changes.
+  // Only do this for controlled (read-only) inputs.
+  useEffect(() => {
+    if (amount !== null) {
+      setDisplayAmount(amount);
+    }
+  }, [amount, setDisplayAmount]);
+
+  const isError = errorMessage !== null;
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          'flex flex-col gap-3 bg-mono-20 dark:bg-mono-180 p-3 rounded-lg border border-mono-40 dark:border-mono-160',
+          isError && 'border-red-70 dark:border-red-50',
+        )}
+      >
+        <div className="flex justify-between">
+          <NetworkSelector
+            selectedNetworkId={networkId}
+            setNetworkId={setNetworkId}
+          />
+
+          {rightElement}
+        </div>
+
+        <hr className="dark:border-mono-160" />
+
+        <div className="flex gap-1">
+          <input
+            id={id}
+            className={twMerge(
+              'w-full bg-transparent border-none text-xl font-bold outline-none focus:ring-0',
+              className,
+            )}
+            type="text"
+            placeholder={placeholder}
+            value={displayAmount}
+            onChange={(e) => handleChange(e.target.value)}
+            readOnly={isReadOnly}
+          />
+
+          <ProtocolSelector
+            selectedNetworkId={networkId}
+            selectedProtocolId={protocolId}
+            setProtocolId={setProtocolId}
+            isDerivativeVariant={isDerivativeVariant}
+          />
+        </div>
+      </div>
+
+      {errorMessage !== null && (
+        <Typography variant="body2" className="text-red-70 dark:text-red-50">
+          * {errorMessage}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default LsInput;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsOverviewItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsOverviewItem.tsx
index 421154cbda..c308c30e7c 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsOverviewItem.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsOverviewItem.tsx
@@ -7,7 +7,7 @@ import { FC, useMemo } from 'react';
 
 import StatItem from '../../../components/StatItem';
 import {
-  LST_PREFIX,
+  LS_DERIVATIVE_TOKEN_PREFIX,
   TVS_TOOLTIP,
 } from '../../../constants/liquidStaking/constants';
 import { LsToken } from '../../../constants/liquidStaking/types';
@@ -20,7 +20,6 @@ export type LsOverviewItemProps = {
   tokenSymbol: LsToken;
   totalValueStaked: number;
   totalStaked: string;
-  hasLiquidIndicator: boolean;
 };
 
 const LsOverviewItem: FC<LsOverviewItemProps> = ({
@@ -28,7 +27,6 @@ const LsOverviewItem: FC<LsOverviewItemProps> = ({
   tokenSymbol,
   totalValueStaked,
   totalStaked,
-  hasLiquidIndicator,
 }) => {
   const formattedTotalValueStaked = totalValueStaked.toLocaleString('en-US', {
     style: 'currency',
@@ -46,11 +44,9 @@ const LsOverviewItem: FC<LsOverviewItemProps> = ({
         <div className="relative">
           <LsTokenIcon size="lg" name={tokenSymbol} />
 
-          {hasLiquidIndicator && (
-            <div className="absolute bottom-0 right-0 z-20">
-              <ChainIcon size="md" name="tangle" />
-            </div>
-          )}
+          <div className="absolute bottom-0 right-0 z-20">
+            <ChainIcon size="md" name="tangle" />
+          </div>
         </div>
 
         <Typography variant="body1" fw="normal" className="dark:text-mono-0">
@@ -58,7 +54,7 @@ const LsOverviewItem: FC<LsOverviewItemProps> = ({
         </Typography>
 
         <Chip className="normal-case" color="dark-grey">
-          {LST_PREFIX}
+          {LS_DERIVATIVE_TOKEN_PREFIX}
           {tokenSymbol.toUpperCase()}
         </Chip>
       </div>
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
similarity index 69%
rename from apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx
rename to apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
index 278bc4dac0..b983ab832e 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
@@ -16,15 +16,16 @@ import {
 import React, { FC, useCallback, useMemo } from 'react';
 import { z } from 'zod';
 
-import { LST_PREFIX } from '../../../constants/liquidStaking/constants';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
 import {
+  LsNetworkId,
   LsProtocolId,
   LsSearchParamKey,
 } from '../../../constants/liquidStaking/types';
-import useExchangeRate, {
+import useLsExchangeRate, {
   ExchangeRateType,
-} from '../../../data/liquidStaking/useExchangeRate';
-import { useLiquidStakingStore } from '../../../data/liquidStaking/useLiquidStakingStore';
+} 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';
@@ -32,15 +33,16 @@ import useSearchParamState from '../../../hooks/useSearchParamState';
 import useSearchParamSync from '../../../hooks/useSearchParamSync';
 import { TxStatus } from '../../../hooks/useSubstrateTx';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import AgnosticLsBalance from './AgnosticLsBalance';
 import ExchangeRateDetailItem from './ExchangeRateDetailItem';
-import LiquidStakingInput from './LiquidStakingInput';
-import MintAndRedeemFeeDetailItem from './MintAndRedeemFeeDetailItem';
-import SelectValidatorsButton from './SelectValidatorsButton';
+import FeeDetailItem from './FeeDetailItem';
+import LsAgnosticBalance from './LsAgnosticBalance';
+import LsFeeWarning from './LsFeeWarning';
+import LsInput from './LsInput';
+import TotalDetailItem from './TotalDetailItem';
 import UnstakePeriodDetailItem from './UnstakePeriodDetailItem';
 import useLsSpendingLimits from './useLsSpendingLimits';
 
-const LiquidStakeCard: FC = () => {
+const LsStakeCard: FC = () => {
   const [fromAmount, setFromAmount] = useSearchParamState<BN | null>({
     defaultValue: null,
     key: LsSearchParamKey.AMOUNT,
@@ -48,7 +50,13 @@ const LiquidStakeCard: FC = () => {
     stringify: (value) => value?.toString(),
   });
 
-  const { selectedProtocolId, setSelectedProtocolId } = useLiquidStakingStore();
+  const {
+    selectedProtocolId,
+    setSelectedProtocolId,
+    selectedNetworkId,
+    setSelectedNetworkId,
+  } = useLsStore();
+
   const { execute: executeMintTx, status: mintTxStatus } = useMintTx();
   const performLiquifierDeposit = useLiquifierDeposit();
   const activeAccountAddress = useActiveAccountAddress();
@@ -68,24 +76,42 @@ const LiquidStakeCard: FC = () => {
     setValue: setSelectedProtocolId,
   });
 
-  const { exchangeRate } = useExchangeRate(
-    ExchangeRateType.NativeToLiquid,
+  useSearchParamSync({
+    key: LsSearchParamKey.NETWORK_ID,
+    value: selectedNetworkId,
+    parse: (value) => z.nativeEnum(LsNetworkId).parse(parseInt(value)),
+    stringify: (value) => value.toString(),
+    setValue: setSelectedNetworkId,
+  });
+
+  const {
+    exchangeRate: exchangeRateOrError,
+    isRefreshing: isRefreshingExchangeRate,
+  } = useLsExchangeRate(
+    ExchangeRateType.NativeToDerivative,
     selectedProtocolId,
   );
 
+  // TODO: Properly handle the error state.
+  const exchangeRate =
+    exchangeRateOrError instanceof Error ? null : exchangeRateOrError;
+
   const handleStakeClick = useCallback(async () => {
     // Not ready yet; no amount given.
     if (fromAmount === null) {
       return;
     }
 
-    if (selectedProtocol.type === 'parachain' && executeMintTx !== null) {
+    if (
+      selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
+      executeMintTx !== null
+    ) {
       executeMintTx({
         amount: fromAmount,
         currency: selectedProtocol.currency,
       });
     } else if (
-      selectedProtocol.type === 'erc20' &&
+      selectedProtocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER &&
       performLiquifierDeposit !== null
     ) {
       await performLiquifierDeposit(selectedProtocol.id, fromAmount);
@@ -102,22 +128,28 @@ const LiquidStakeCard: FC = () => {
 
   const canCallStake =
     (fromAmount !== null &&
-      selectedProtocol.type === 'parachain' &&
+      selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
       executeMintTx !== null) ||
-    (selectedProtocol.type === 'erc20' && performLiquifierDeposit !== null);
+    (selectedProtocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER &&
+      performLiquifierDeposit !== null);
 
   const walletBalance = (
-    <AgnosticLsBalance
+    <LsAgnosticBalance
       protocolId={selectedProtocolId}
       tooltip="Click to use all available balance"
-      onClick={() => setFromAmount(maxSpendable)}
+      onClick={() => {
+        if (maxSpendable !== null) {
+          setFromAmount(maxSpendable);
+        }
+      }}
     />
   );
 
   return (
     <>
-      <LiquidStakingInput
+      <LsInput
         id="liquid-staking-stake-from"
+        networkId={selectedNetworkId}
         protocolId={selectedProtocolId}
         token={selectedProtocol.token}
         amount={fromAmount}
@@ -125,42 +157,52 @@ const LiquidStakeCard: FC = () => {
         onAmountChange={setFromAmount}
         placeholder={`0 ${selectedProtocol.token}`}
         rightElement={walletBalance}
-        setChainId={setSelectedProtocolId}
+        setProtocolId={setSelectedProtocolId}
         minAmount={minSpendable ?? undefined}
         maxAmount={maxSpendable ?? undefined}
+        setNetworkId={setSelectedNetworkId}
       />
 
       <ArrowDownIcon className="dark:fill-mono-0 self-center w-7 h-7" />
 
-      <LiquidStakingInput
+      <LsInput
         id="liquid-staking-stake-to"
-        protocolId={LsProtocolId.TANGLE_RESTAKING_PARACHAIN}
-        placeholder={`0 ${LST_PREFIX}${selectedProtocol.token}`}
+        networkId={selectedNetworkId}
+        protocolId={selectedProtocolId}
+        placeholder={`0 ${LS_DERIVATIVE_TOKEN_PREFIX}${selectedProtocol.token}`}
         decimals={selectedProtocol.decimals}
         amount={toAmount}
         isReadOnly
-        isTokenLiquidVariant
+        isDerivativeVariant
         token={selectedProtocol.token}
-        rightElement={<SelectValidatorsButton />}
+        className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
       />
 
       {/* Details */}
       <div className="flex flex-col gap-2 p-3">
+        <UnstakePeriodDetailItem protocolId={selectedProtocolId} />
+
         <ExchangeRateDetailItem
           protocolId={selectedProtocolId}
           token={selectedProtocol.token}
-          type={ExchangeRateType.NativeToLiquid}
+          type={ExchangeRateType.NativeToDerivative}
         />
 
-        <MintAndRedeemFeeDetailItem
-          intendedAmount={fromAmount}
+        <FeeDetailItem
+          inputAmount={fromAmount}
           isMinting
-          token={selectedProtocol.token}
+          protocolId={selectedProtocolId}
         />
 
-        <UnstakePeriodDetailItem protocolId={selectedProtocolId} />
+        <TotalDetailItem
+          isMinting
+          protocolId={selectedProtocolId}
+          inputAmount={fromAmount}
+        />
       </div>
 
+      <LsFeeWarning isMinting selectedProtocolId={selectedProtocolId} />
+
       <Button
         isDisabled={
           // No active account.
@@ -229,4 +271,4 @@ export const SelectParachainContent: FC<SelectParachainContentProps> = ({
   );
 };
 
-export default LiquidStakeCard;
+export default LsStakeCard;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
similarity index 73%
rename from apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard.tsx
rename to apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
index 600a38406f..c6670437fb 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
@@ -10,36 +10,45 @@ import { Button } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { z } from 'zod';
 
-import { LST_PREFIX } from '../../../constants/liquidStaking/constants';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
 import {
+  LsNetworkId,
   LsProtocolId,
   LsSearchParamKey,
 } from '../../../constants/liquidStaking/types';
-import useExchangeRate, {
+import useLsExchangeRate, {
   ExchangeRateType,
-} from '../../../data/liquidStaking/useExchangeRate';
-import { useLiquidStakingStore } from '../../../data/liquidStaking/useLiquidStakingStore';
+} from '../../../data/liquidStaking/useLsExchangeRate';
+import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import useRedeemTx from '../../../data/liquidStaking/useRedeemTx';
 import useLiquifierUnlock from '../../../data/liquifier/useLiquifierUnlock';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
 import useSearchParamSync from '../../../hooks/useSearchParamSync';
 import { TxStatus } from '../../../hooks/useSubstrateTx';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import AgnosticLsBalance from './AgnosticLsBalance';
 import ExchangeRateDetailItem from './ExchangeRateDetailItem';
-import LiquidStakingInput from './LiquidStakingInput';
-import MintAndRedeemFeeDetailItem from './MintAndRedeemFeeDetailItem';
+import FeeDetailItem from './FeeDetailItem';
+import LsAgnosticBalance from './LsAgnosticBalance';
+import LsFeeWarning from './LsFeeWarning';
+import LsInput from './LsInput';
 import SelectTokenModal from './SelectTokenModal';
+import TotalDetailItem from './TotalDetailItem';
 import UnstakePeriodDetailItem from './UnstakePeriodDetailItem';
 import UnstakeRequestSubmittedModal from './UnstakeRequestSubmittedModal';
 import useLsSpendingLimits from './useLsSpendingLimits';
 
-const LiquidUnstakeCard: FC = () => {
+const LsUnstakeCard: FC = () => {
   const [isSelectTokenModalOpen, setIsSelectTokenModalOpen] = useState(false);
   const [fromAmount, setFromAmount] = useState<BN | null>(null);
-  const { selectedProtocolId, setSelectedProtocolId } = useLiquidStakingStore();
   const activeAccountAddress = useActiveAccountAddress();
 
+  const {
+    selectedProtocolId,
+    setSelectedProtocolId,
+    selectedNetworkId,
+    setSelectedNetworkId,
+  } = useLsStore();
+
   const [didLiquifierUnlockSucceed, setDidLiquifierUnlockSucceed] =
     useState(false);
 
@@ -70,11 +79,18 @@ const LiquidUnstakeCard: FC = () => {
 
   const selectedProtocol = getLsProtocolDef(selectedProtocolId);
 
-  const { exchangeRate } = useExchangeRate(
-    ExchangeRateType.LiquidToNative,
+  const {
+    exchangeRate: exchangeRateOrError,
+    isRefreshing: isRefreshingExchangeRate,
+  } = useLsExchangeRate(
+    ExchangeRateType.DerivativeToNative,
     selectedProtocol.id,
   );
 
+  // TODO: Properly handle the error state.
+  const exchangeRate =
+    exchangeRateOrError instanceof Error ? null : exchangeRateOrError;
+
   useSearchParamSync({
     key: LsSearchParamKey.AMOUNT,
     value: fromAmount,
@@ -89,13 +105,16 @@ const LiquidUnstakeCard: FC = () => {
       return;
     }
 
-    if (selectedProtocol.type === 'parachain' && executeRedeemTx !== null) {
+    if (
+      selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
+      executeRedeemTx !== null
+    ) {
       executeRedeemTx({
         amount: fromAmount,
         currency: selectedProtocol.currency,
       });
     } else if (
-      selectedProtocol.type === 'erc20' &&
+      selectedProtocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER &&
       performLiquifierUnlock !== null
     ) {
       setDidLiquifierUnlockSucceed(false);
@@ -135,7 +154,7 @@ const LiquidUnstakeCard: FC = () => {
   }, [didLiquifierUnlockSucceed, redeemTxStatus]);
 
   const stakedWalletBalance = (
-    <AgnosticLsBalance
+    <LsAgnosticBalance
       isNative={false}
       protocolId={selectedProtocol.id}
       tooltip="Click to use all staked balance"
@@ -145,22 +164,27 @@ const LiquidUnstakeCard: FC = () => {
 
   // TODO: Also check if the user has enough balance to unstake.
   const canCallUnstake =
-    (selectedProtocol.type === 'parachain' && executeRedeemTx !== null) ||
-    (selectedProtocol.type === 'erc20' && performLiquifierUnlock !== null);
+    (selectedProtocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN &&
+      executeRedeemTx !== null) ||
+    (selectedProtocol.networkId === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER &&
+      performLiquifierUnlock !== null);
 
   return (
     <>
       {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */}
-      <LiquidStakingInput
+      <LsInput
         id="liquid-staking-unstake-from"
-        protocolId={LsProtocolId.TANGLE_RESTAKING_PARACHAIN}
+        networkId={selectedNetworkId}
+        setNetworkId={setSelectedNetworkId}
+        protocolId={selectedProtocolId}
+        setProtocolId={setSelectedProtocolId}
         token={selectedProtocol.token}
         amount={fromAmount}
         decimals={selectedProtocol.decimals}
         onAmountChange={setFromAmount}
-        placeholder={`0 ${LST_PREFIX}${selectedProtocol.token}`}
+        placeholder={`0 ${LS_DERIVATIVE_TOKEN_PREFIX}${selectedProtocol.token}`}
         rightElement={stakedWalletBalance}
-        isTokenLiquidVariant
+        isDerivativeVariant
         minAmount={minSpendable ?? undefined}
         maxAmount={maxSpendable ?? undefined}
         maxErrorMessage="Not enough stake to redeem"
@@ -169,34 +193,43 @@ const LiquidUnstakeCard: FC = () => {
 
       <ArrowDownIcon className="dark:fill-mono-0 self-center w-7 h-7" />
 
-      <LiquidStakingInput
+      <LsInput
         id="liquid-staking-unstake-to"
+        networkId={selectedNetworkId}
         protocolId={selectedProtocolId}
         amount={toAmount}
         decimals={selectedProtocol.decimals}
         placeholder={`0 ${selectedProtocol.token}`}
         token={selectedProtocol.token}
-        setChainId={setSelectedProtocolId}
         isReadOnly
+        className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
       />
 
       {/* Details */}
       <div className="flex flex-col gap-2 p-3">
+        <UnstakePeriodDetailItem protocolId={selectedProtocolId} />
+
         <ExchangeRateDetailItem
-          protocolId={selectedProtocol.id}
+          protocolId={selectedProtocolId}
           token={selectedProtocol.token}
-          type={ExchangeRateType.LiquidToNative}
+          type={ExchangeRateType.DerivativeToNative}
         />
 
-        <MintAndRedeemFeeDetailItem
-          token={selectedProtocol.token}
+        <FeeDetailItem
+          protocolId={selectedProtocolId}
           isMinting={false}
-          intendedAmount={fromAmount}
+          inputAmount={fromAmount}
         />
 
-        <UnstakePeriodDetailItem protocolId={selectedProtocol.id} />
+        <TotalDetailItem
+          isMinting={false}
+          protocolId={selectedProtocolId}
+          inputAmount={fromAmount}
+        />
       </div>
 
+      <LsFeeWarning isMinting={false} selectedProtocolId={selectedProtocolId} />
+
       <Button
         isDisabled={
           // No active account.
@@ -230,4 +263,4 @@ const LiquidUnstakeCard: FC = () => {
   );
 };
 
-export default LiquidUnstakeCard;
+export default LsUnstakeCard;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/MintAndRedeemFeeDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/MintAndRedeemFeeDetailItem.tsx
deleted file mode 100644
index 6e1521317b..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/MintAndRedeemFeeDetailItem.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { BN, BN_ZERO } from '@polkadot/util';
-import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config';
-import { SkeletonLoader } from '@webb-tools/webb-ui-components';
-import { FC, useMemo } from 'react';
-
-import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
-import { LsToken } from '../../../constants/liquidStaking/types';
-import useMintAndRedeemFees from '../../../data/liquidStaking/useMintAndRedeemFees';
-import formatBn from '../../../utils/formatBn';
-import scaleAmountByPermill from '../../../utils/scaleAmountByPermill';
-import DetailItem from './DetailItem';
-
-export type MintAndRedeemFeeDetailItemProps = {
-  isMinting: boolean;
-  intendedAmount: BN | null;
-  token: LsToken;
-};
-
-const MintAndRedeemFeeDetailItem: FC<MintAndRedeemFeeDetailItemProps> = ({
-  isMinting,
-  intendedAmount,
-  token,
-}) => {
-  const { result: fees } = useMintAndRedeemFees();
-  const fee = fees === null ? null : isMinting ? fees.mintFee : fees.redeemFee;
-
-  const feeAmount = useMemo(() => {
-    if (fee === null) {
-      return null;
-    }
-
-    return scaleAmountByPermill(intendedAmount ?? BN_ZERO, fee);
-  }, [fee, intendedAmount]);
-
-  const formattedFeeAmount = useMemo(() => {
-    if (fee === null) {
-      return EMPTY_VALUE_PLACEHOLDER;
-    } else if (feeAmount === null) {
-      return null;
-    }
-
-    // TODO: What token is charged as fee? The same as the intended token? TNT? Depending on which one it is, use its corresponding decimals.
-    return formatBn(feeAmount, TANGLE_TOKEN_DECIMALS);
-  }, [fee, feeAmount]);
-
-  const value =
-    formattedFeeAmount === null ? (
-      <SkeletonLoader className="max-w-[80px]" />
-    ) : (
-      `${formattedFeeAmount} ${token}`
-    );
-
-  const feeTitle = fee === null ? 'Fee' : `Fee (${(fee * 100).toFixed(2)}%)`;
-
-  return <DetailItem title={feeTitle} value={value} />;
-};
-
-export default MintAndRedeemFeeDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx
new file mode 100644
index 0000000000..fa176d2a30
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx
@@ -0,0 +1,83 @@
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { ScrollArea } from '@radix-ui/react-scroll-area';
+import { ChainIcon } from '@webb-tools/icons';
+import {
+  Dropdown,
+  DropdownBody,
+  DropdownMenuItem,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
+
+import { LS_NETWORKS } from '../../../constants/liquidStaking/constants';
+import { LsNetworkId } from '../../../constants/liquidStaking/types';
+import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork';
+import DropdownChevronIcon from './DropdownChevronIcon';
+
+type NetworkSelectorProps = {
+  selectedNetworkId: LsNetworkId;
+
+  /**
+   * If this function is not provided, the selector will be
+   * considered read-only.
+   */
+  setNetworkId?: (newNetworkId: LsNetworkId) => void;
+};
+
+const NetworkSelector: FC<NetworkSelectorProps> = ({
+  selectedNetworkId,
+  setNetworkId,
+}) => {
+  const isReadOnly = setNetworkId === undefined;
+  const selectedNetwork = getLsNetwork(selectedNetworkId);
+
+  const base = (
+    <div className="group flex gap-1 items-center justify-center">
+      <div className="flex gap-2 items-center justify-center">
+        <ChainIcon size="lg" name={selectedNetwork.chainIconFileName} />
+
+        <Typography variant="h5" fw="bold" className="dark:text-mono-40">
+          {selectedNetwork.networkName}
+        </Typography>
+      </div>
+
+      {!isReadOnly && <DropdownChevronIcon isLarge />}
+    </div>
+  );
+
+  return setNetworkId !== undefined ? (
+    <Dropdown>
+      <DropdownMenuTrigger>{base}</DropdownMenuTrigger>
+
+      <DropdownBody>
+        <ScrollArea>
+          <ul className="max-h-[300px]">
+            {LS_NETWORKS.map((network) => {
+              return (
+                <li key={network.type}>
+                  <DropdownMenuItem onClick={() => setNetworkId(network.type)}>
+                    <div className="flex gap-2 items-center justify-start">
+                      <ChainIcon size="lg" name={network.chainIconFileName} />
+
+                      <Typography
+                        variant="h5"
+                        fw="bold"
+                        className="dark:text-mono-40"
+                      >
+                        {network.networkName}
+                      </Typography>
+                    </div>
+                  </DropdownMenuItem>
+                </li>
+              );
+            })}
+          </ul>
+        </ScrollArea>
+      </DropdownBody>
+    </Dropdown>
+  ) : (
+    base
+  );
+};
+
+export default NetworkSelector;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ParachainWalletBalance.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ParachainWalletBalance.tsx
deleted file mode 100644
index 1333f6f8aa..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ParachainWalletBalance.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import { BN_ZERO } from '@polkadot/util';
-import { WalletFillIcon, WalletLineIcon } from '@webb-tools/icons';
-import {
-  SkeletonLoader,
-  Tooltip,
-  TooltipBody,
-  TooltipTrigger,
-  Typography,
-} from '@webb-tools/webb-ui-components';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
-import { LsParachainToken } from '../../../constants/liquidStaking/types';
-import useParachainBalances from '../../../data/liquidStaking/useParachainBalances';
-import useSubstrateAddress from '../../../hooks/useSubstrateAddress';
-import formatBn from '../../../utils/formatBn';
-
-export type ParachainWalletBalanceProps = {
-  isNative?: boolean;
-  token: LsParachainToken;
-  decimals: number;
-  tooltip?: string;
-  onlyShowTooltipWhenBalanceIsSet?: boolean;
-  onClick?: () => void;
-};
-
-const ParachainWalletBalance: FC<ParachainWalletBalanceProps> = ({
-  isNative = true,
-  token,
-  decimals,
-  tooltip,
-  onlyShowTooltipWhenBalanceIsSet = true,
-  onClick,
-}) => {
-  const [isHovering, setIsHovering] = useState(false);
-
-  const activeSubstrateAddress = useSubstrateAddress();
-  const { nativeBalances, liquidBalances } = useParachainBalances();
-  const map = isNative ? nativeBalances : liquidBalances;
-
-  const balance = useMemo(() => {
-    if (map === null) {
-      return null;
-    }
-
-    return map.get(token) ?? BN_ZERO;
-  }, [map, token]);
-
-  const formattedBalance = useMemo(() => {
-    // No account is active.
-    if (activeSubstrateAddress === null) {
-      return EMPTY_VALUE_PLACEHOLDER;
-    }
-    // Balance is still loading.
-    else if (balance === null) {
-      return null;
-    }
-
-    return formatBn(balance, decimals, {
-      fractionMaxLength: undefined,
-      includeCommas: true,
-    });
-  }, [activeSubstrateAddress, balance, decimals]);
-
-  const isClickable =
-    onlyShowTooltipWhenBalanceIsSet && balance !== null && !balance.isZero();
-
-  const handleClick = useCallback(() => {
-    if (!isClickable || onClick === undefined) {
-      return;
-    }
-
-    onClick();
-  }, [isClickable, onClick]);
-
-  const content = (
-    <div
-      onClick={handleClick}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-      className={twMerge(
-        'group flex gap-1 items-center justify-center',
-        isClickable && 'cursor-pointer',
-      )}
-    >
-      {isHovering && isClickable ? (
-        <WalletFillIcon
-          className={twMerge(isClickable && 'dark:fill-mono-0')}
-        />
-      ) : (
-        <WalletLineIcon className="dark:fill-mono-80" />
-      )}
-
-      {formattedBalance === null ? (
-        <SkeletonLoader className="rounded-2xl w-12" size="md" />
-      ) : (
-        <Typography
-          variant="body1"
-          fw="bold"
-          className={twMerge(
-            'flex gap-1 items-center dark:text-mono-80',
-            isClickable && 'group-hover:dark:text-mono-0',
-          )}
-        >
-          {formattedBalance}
-        </Typography>
-      )}
-    </div>
-  );
-
-  if (tooltip === undefined || !isClickable) {
-    return content;
-  }
-
-  // Otherwise, the tooltip is set and it should be shown.
-  return (
-    <Tooltip>
-      <TooltipTrigger>{content}</TooltipTrigger>
-
-      <TooltipBody className="max-w-[185px] w-auto">
-        <span>{tooltip}</span>
-      </TooltipBody>
-    </Tooltip>
-  );
-};
-
-export default ParachainWalletBalance;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ProtocolSelector.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ProtocolSelector.tsx
new file mode 100644
index 0000000000..aa27a55b59
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ProtocolSelector.tsx
@@ -0,0 +1,92 @@
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { ChainIcon } from '@webb-tools/icons';
+import {
+  Dropdown,
+  DropdownBody,
+  DropdownMenuItem,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+import { FC } from 'react';
+
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
+import {
+  LsNetworkId,
+  LsProtocolId,
+} from '../../../constants/liquidStaking/types';
+import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork';
+import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+import LsTokenIcon from '../../LsTokenIcon';
+import DropdownChevronIcon from './DropdownChevronIcon';
+
+type ProtocolSelectorProps = {
+  selectedNetworkId: LsNetworkId;
+  selectedProtocolId: LsProtocolId;
+  setProtocolId?: (newProtocolId: LsProtocolId) => void;
+  isDerivativeVariant: boolean;
+};
+
+const ProtocolSelector: FC<ProtocolSelectorProps> = ({
+  selectedNetworkId,
+  selectedProtocolId,
+  setProtocolId,
+  isDerivativeVariant,
+}) => {
+  const protocol = getLsProtocolDef(selectedProtocolId);
+  const network = getLsNetwork(selectedNetworkId);
+
+  const trySetProtocolId = (newProtocolId: LsProtocolId) => {
+    return () => {
+      if (setProtocolId === undefined) {
+        return;
+      }
+
+      setProtocolId(newProtocolId);
+    };
+  };
+
+  return (
+    <Dropdown>
+      <DropdownMenuTrigger disabled={setProtocolId === undefined}>
+        <div className="group flex gap-2 justify-center items-center bg-mono-40 dark:bg-mono-170 px-4 py-2 rounded-lg">
+          <LsTokenIcon name={protocol.token} />
+
+          <Typography variant="h5" fw="bold">
+            {isDerivativeVariant && LS_DERIVATIVE_TOKEN_PREFIX}
+            {protocol.token}
+          </Typography>
+
+          {setProtocolId !== undefined && <DropdownChevronIcon isLarge />}
+        </div>
+      </DropdownMenuTrigger>
+
+      <DropdownBody>
+        <ScrollArea>
+          <ul className="max-h-[300px]">
+            {network.protocols.map((protocol) => {
+              return (
+                <li key={protocol.id}>
+                  <DropdownMenuItem onClick={trySetProtocolId(protocol.id)}>
+                    <div className="flex gap-2 items-center justify-start">
+                      <ChainIcon size="lg" name={protocol.chainIconFileName} />
+
+                      <Typography
+                        variant="h5"
+                        fw="bold"
+                        className="dark:text-mono-40"
+                      >
+                        {protocol.token}
+                      </Typography>
+                    </div>
+                  </DropdownMenuItem>
+                </li>
+              );
+            })}
+          </ul>
+        </ScrollArea>
+      </DropdownBody>
+    </Dropdown>
+  );
+};
+
+export default ProtocolSelector;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TokenChip.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TokenChip.tsx
index aa8d042126..8bac4d61d9 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TokenChip.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TokenChip.tsx
@@ -2,7 +2,7 @@ import { Typography } from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { LST_PREFIX } from '../../../constants/liquidStaking/constants';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
 import { LsToken } from '../../../constants/liquidStaking/types';
 import LsTokenIcon from '../../LsTokenIcon';
 import DropdownChevronIcon from './DropdownChevronIcon';
@@ -25,7 +25,7 @@ const TokenChip: FC<TokenChipProps> = ({ token, isLiquidVariant, onClick }) => {
       {token && <LsTokenIcon name={token} />}
 
       <Typography variant="h5" fw="bold">
-        {isLiquidVariant && LST_PREFIX}
+        {isLiquidVariant && LS_DERIVATIVE_TOKEN_PREFIX}
         {token}
       </Typography>
 
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TotalDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TotalDetailItem.tsx
new file mode 100644
index 0000000000..d2f7f31230
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TotalDetailItem.tsx
@@ -0,0 +1,89 @@
+import { BN } from '@polkadot/util';
+import { FC, useMemo } from 'react';
+
+import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
+import { LsProtocolId } from '../../../constants/liquidStaking/types';
+import useLsExchangeRate, {
+  ExchangeRateType,
+} from '../../../data/liquidStaking/useLsExchangeRate';
+import formatBn from '../../../utils/formatBn';
+import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+import scaleAmountByPermill from '../../../utils/scaleAmountByPermill';
+import DetailItem from './DetailItem';
+import useLsFeePermill from './useLsFeePermill';
+
+export type TotalDetailItemProps = {
+  isMinting: boolean;
+  inputAmount: BN | null;
+  protocolId: LsProtocolId;
+};
+
+const TotalDetailItem: FC<TotalDetailItemProps> = ({
+  isMinting,
+  inputAmount,
+  protocolId,
+}) => {
+  const feePermill = useLsFeePermill(protocolId, isMinting);
+
+  const { exchangeRate } = useLsExchangeRate(
+    isMinting
+      ? ExchangeRateType.NativeToDerivative
+      : ExchangeRateType.DerivativeToNative,
+    protocolId,
+  );
+
+  const protocol = getLsProtocolDef(protocolId);
+
+  const totalAmount = useMemo(() => {
+    if (inputAmount === null || exchangeRate === null || feePermill === null) {
+      return null;
+    }
+    // Propagate errors.
+    else if (feePermill instanceof Error) {
+      return feePermill;
+    } else if (exchangeRate instanceof Error) {
+      return exchangeRate;
+    }
+
+    const feeAmount = scaleAmountByPermill(inputAmount, feePermill);
+
+    return isMinting
+      ? inputAmount.muln(exchangeRate).sub(feeAmount)
+      : inputAmount.divn(exchangeRate).sub(feeAmount);
+  }, [exchangeRate, feePermill, inputAmount, isMinting]);
+
+  const formattedTotalAmount = useMemo(() => {
+    // Nothing to show if the input amount is not set.
+    if (inputAmount === null) {
+      return EMPTY_VALUE_PLACEHOLDER;
+    }
+    // Propagate error or loading state.
+    else if (!(totalAmount instanceof BN)) {
+      return totalAmount;
+    }
+
+    return formatBn(totalAmount, protocol.decimals, {
+      includeCommas: true,
+    });
+  }, [inputAmount, totalAmount, protocol.decimals]);
+
+  const token = isMinting
+    ? `${LS_DERIVATIVE_TOKEN_PREFIX}${protocol.token}`
+    : protocol.token;
+
+  const value =
+    typeof formattedTotalAmount === 'string'
+      ? `${formattedTotalAmount} ${token}`
+      : formattedTotalAmount;
+
+  return (
+    <DetailItem
+      title="Total"
+      tooltip="The final amount that you will receive. This includes fees."
+      value={value}
+    />
+  );
+};
+
+export default TotalDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useAgnosticLsBalance.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useAgnosticLsBalance.ts
deleted file mode 100644
index 4d1ba13489..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useAgnosticLsBalance.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { BN, BN_ZERO } from '@polkadot/util';
-import { useCallback, useEffect, useState } from 'react';
-import { erc20Abi } from 'viem';
-
-import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
-import LIQUIFIER_TG_TOKEN_ABI from '../../../constants/liquidStaking/liquifierTgTokenAbi';
-import { LsProtocolId } from '../../../constants/liquidStaking/types';
-import useParachainBalances from '../../../data/liquidStaking/useParachainBalances';
-import usePolling, {
-  PollingPrimaryCacheKey,
-} from '../../../data/liquidStaking/usePolling';
-import useContractRead from '../../../data/liquifier/useContractRead';
-import useEvmAddress20 from '../../../hooks/useEvmAddress';
-import useSubstrateAddress from '../../../hooks/useSubstrateAddress';
-import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-
-const useAgnosticLsBalance = (isNative: boolean, protocolId: LsProtocolId) => {
-  const substrateAddress = useSubstrateAddress();
-  const evmAddress20 = useEvmAddress20();
-  const { nativeBalances, liquidBalances } = useParachainBalances();
-  const readErc20 = useContractRead(erc20Abi);
-  const readLiquidErc20 = useContractRead(LIQUIFIER_TG_TOKEN_ABI);
-
-  const [balance, setBalance] = useState<
-    BN | null | typeof EMPTY_VALUE_PLACEHOLDER
-  >(EMPTY_VALUE_PLACEHOLDER);
-
-  const parachainBalances = isNative ? nativeBalances : liquidBalances;
-  const isAccountConnected = substrateAddress !== null || evmAddress20 !== null;
-  const protocol = getLsProtocolDef(protocolId);
-
-  // Reset balance to a placeholder when the active account is
-  // disconnected.
-  useEffect(() => {
-    // Account is not connected. Reset balance to a placeholder.
-    if (!isAccountConnected) {
-      setBalance(EMPTY_VALUE_PLACEHOLDER);
-
-      return;
-    }
-  }, [isAccountConnected]);
-
-  const erc20BalanceFetcher = useCallback(() => {
-    if (protocol.type !== 'erc20' || evmAddress20 === null) {
-      return;
-    }
-
-    const target = isNative ? readErc20 : readLiquidErc20;
-
-    // Still loading.
-    if (target === null) {
-      setBalance(null);
-
-      return;
-    }
-
-    target({
-      address: isNative ? protocol.address : protocol.liquifierTgTokenAddress,
-      functionName: 'balanceOf',
-      args: [evmAddress20],
-    }).then((result) => {
-      if (result instanceof Error) {
-        return;
-      }
-
-      setBalance((prevBalance) => {
-        const newBalance = new BN(result.toString());
-
-        // Do not update the balance state with a new BN instance if
-        // it is the same as the current balance.
-        if (prevBalance?.toString() === newBalance.toString()) {
-          return prevBalance;
-        }
-
-        return newBalance;
-      });
-    });
-  }, [evmAddress20, isNative, protocol, readErc20, readLiquidErc20]);
-
-  usePolling({
-    fetcher: erc20BalanceFetcher,
-    refreshInterval: 5_000,
-    primaryCacheKey: PollingPrimaryCacheKey.LS_ERC20_BALANCE,
-  });
-
-  useEffect(() => {
-    if (protocol.type !== 'parachain' || parachainBalances === null) {
-      return;
-    }
-
-    const newBalance = parachainBalances.get(protocol.token) ?? BN_ZERO;
-
-    setBalance((prevBalance) => {
-      // Do not update the balance state with a new BN instance if
-      // it is the same as the current balance.
-      if (prevBalance?.toString() === newBalance.toString()) {
-        return prevBalance;
-      }
-
-      return newBalance;
-    });
-  }, [parachainBalances, protocol.token, protocol.type]);
-
-  return balance;
-};
-
-export default useAgnosticLsBalance;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsAgnosticBalance.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsAgnosticBalance.ts
new file mode 100644
index 0000000000..42f70963ba
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsAgnosticBalance.ts
@@ -0,0 +1,134 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { useCallback, useEffect, useState } from 'react';
+import { erc20Abi } from 'viem';
+
+import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
+import LIQUIFIER_TG_TOKEN_ABI from '../../../constants/liquidStaking/liquifierTgTokenAbi';
+import {
+  LsNetworkId,
+  LsProtocolId,
+} from '../../../constants/liquidStaking/types';
+import useParachainBalances from '../../../data/liquidStaking/useParachainBalances';
+import usePolling from '../../../data/liquidStaking/usePolling';
+import useContractReadOnce from '../../../data/liquifier/useContractReadOnce';
+import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
+import useEvmAddress20 from '../../../hooks/useEvmAddress';
+import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+
+type BalanceUpdater = (
+  prevBalance: BN | null | typeof EMPTY_VALUE_PLACEHOLDER,
+) => BN | null | typeof EMPTY_VALUE_PLACEHOLDER;
+
+const createBalanceStateUpdater = (
+  newBalance: BN | null | typeof EMPTY_VALUE_PLACEHOLDER,
+): BalanceUpdater => {
+  return (prevBalance) => {
+    // Do not trigger a state update for the same underlying balance
+    // value. If it's not checked by strings, a state update with the
+    // same underlying value would trigger an update due to object
+    // references being different.
+    if (newBalance?.toString() === prevBalance?.toString()) {
+      return prevBalance;
+    }
+    // An account was just connected, and the balance is changing
+    // from the empty placeholder -> loading state.
+    else if (newBalance === null && prevBalance === EMPTY_VALUE_PLACEHOLDER) {
+      return null;
+    }
+    // Attempting to switch from a stale value to a loading state.
+    // Deny this request, since we only want to show a loading state
+    // for the initial value. Return the stale balance.
+    else if (prevBalance instanceof BN && newBalance === null) {
+      return prevBalance;
+    }
+
+    return newBalance;
+  };
+};
+
+const useLsAgnosticBalance = (isNative: boolean, protocolId: LsProtocolId) => {
+  const activeAccountAddress = useActiveAccountAddress();
+  const evmAddress20 = useEvmAddress20();
+  const { nativeBalances, liquidBalances } = useParachainBalances();
+
+  // TODO: Why not use the subscription hook variants (useContractRead) instead of manually utilizing usePolling?
+  const readErc20 = useContractReadOnce(erc20Abi);
+  const readTgToken = useContractReadOnce(LIQUIFIER_TG_TOKEN_ABI);
+
+  const [balance, setBalance] = useState<
+    BN | null | typeof EMPTY_VALUE_PLACEHOLDER
+  >(EMPTY_VALUE_PLACEHOLDER);
+
+  const parachainBalances = isNative ? nativeBalances : liquidBalances;
+  const isAccountConnected = activeAccountAddress !== null;
+  const protocol = getLsProtocolDef(protocolId);
+
+  // Reset balance to a placeholder when the active account is
+  // disconnected, and to a loading state once an account is
+  // connected.
+  useEffect(() => {
+    setBalance(isAccountConnected ? null : EMPTY_VALUE_PLACEHOLDER);
+  }, [isAccountConnected]);
+
+  // Reset the balance to the initial loading state when the protocol changes.
+  useEffect(() => {
+    if (isAccountConnected) {
+      setBalance(null);
+    }
+  }, [isAccountConnected, isNative, protocolId]);
+
+  const erc20BalanceFetcher = useCallback(() => {
+    if (
+      protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER ||
+      evmAddress20 === null
+    ) {
+      return;
+    }
+
+    const target = isNative ? readErc20 : readTgToken;
+
+    // There is an account connected, but the target read contract
+    // function is not yet ready (ie. the public client is being re-created).
+    if (target === null) {
+      setBalance(createBalanceStateUpdater(null));
+
+      return;
+    }
+
+    return target({
+      address: isNative
+        ? protocol.erc20TokenAddress
+        : protocol.tgTokenContractAddress,
+      functionName: 'balanceOf',
+      args: [evmAddress20],
+    }).then((result) => {
+      if (result instanceof Error) {
+        return;
+      }
+
+      setBalance(createBalanceStateUpdater(new BN(result.toString())));
+    });
+  }, [evmAddress20, isNative, protocol, readErc20, readTgToken]);
+
+  const isRefreshing = usePolling({
+    // Pause polling if there's no active account.
+    effect: isAccountConnected ? erc20BalanceFetcher : null,
+  });
+
+  useEffect(() => {
+    if (
+      protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN ||
+      parachainBalances === null
+    ) {
+      return;
+    }
+
+    const newBalance = parachainBalances.get(protocol.token) ?? BN_ZERO;
+
+    setBalance(createBalanceStateUpdater(newBalance));
+  }, [parachainBalances, protocol.token, protocol.networkId]);
+
+  return { balance, isRefreshing };
+};
+
+export default useLsAgnosticBalance;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsFeePermill.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsFeePermill.ts
new file mode 100644
index 0000000000..020aea8448
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsFeePermill.ts
@@ -0,0 +1,71 @@
+import { useCallback, useEffect } from 'react';
+
+import { LS_REGISTRY_ADDRESS } from '../../../constants/liquidStaking/constants';
+import LIQUIFIER_REGISTRY_ABI from '../../../constants/liquidStaking/liquifierRegistryAbi';
+import {
+  LsNetworkId,
+  LsProtocolId,
+} from '../../../constants/liquidStaking/types';
+import useParachainLsFees from '../../../data/liquidStaking/useParachainLsFees';
+import useContractRead from '../../../data/liquifier/useContractRead';
+import { ContractReadOptions } from '../../../data/liquifier/useContractReadOnce';
+import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+
+const useLsFeePermill = (
+  protocolId: LsProtocolId,
+  isMinting: boolean,
+): number | Error | null => {
+  const { result: parachainFees } = useParachainLsFees();
+
+  const protocol = getLsProtocolDef(protocolId);
+
+  const parachainFee =
+    parachainFees === null
+      ? null
+      : isMinting
+        ? parachainFees.mintFee
+        : parachainFees.redeemFee;
+
+  const getLiquifierFeeOptions = useCallback((): ContractReadOptions<
+    typeof LIQUIFIER_REGISTRY_ABI,
+    'fee'
+  > | null => {
+    if (protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) {
+      return null;
+    }
+
+    return {
+      address: LS_REGISTRY_ADDRESS,
+      functionName: 'fee',
+      // TODO: Need to confirm whether this is the actual expected address. What address is the Liquifier using for fees?
+      args: [protocol.erc20TokenAddress],
+    };
+  }, [protocol]);
+
+  const {
+    value: rawLiquifierFeeOrError,
+    setIsPaused: setIsLiquifierFeePaused,
+  } = useContractRead(LIQUIFIER_REGISTRY_ABI, getLiquifierFeeOptions);
+
+  // Pause liquifier fee fetching if the protocol is a parachain chain.
+  // This helps prevent unnecessary contract read calls.
+  useEffect(() => {
+    setIsLiquifierFeePaused(
+      protocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+    );
+  }, [protocol.networkId, setIsLiquifierFeePaused]);
+
+  // The fee should be returned as a per-mill value from the liquifier contract.
+  const liquifierFeePermillOrError =
+    rawLiquifierFeeOrError instanceof Error
+      ? rawLiquifierFeeOrError
+      : rawLiquifierFeeOrError === null
+        ? null
+        : Number(rawLiquifierFeeOrError) / 100;
+
+  return protocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN
+    ? parachainFee
+    : liquifierFeePermillOrError;
+};
+
+export default useLsFeePermill;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsSpendingLimits.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsSpendingLimits.ts
index 0fa5f02f30..efe9f2d759 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsSpendingLimits.ts
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsSpendingLimits.ts
@@ -2,14 +2,25 @@ import { BN } from '@polkadot/util';
 import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
 import { useCallback, useMemo } from 'react';
 
-import { LsProtocolId } from '../../../constants/liquidStaking/types';
+import {
+  LsNetworkId,
+  LsProtocolId,
+} from '../../../constants/liquidStaking/types';
 import useApi from '../../../hooks/useApi';
 import useApiRx from '../../../hooks/useApiRx';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import useAgnosticLsBalance from './useAgnosticLsBalance';
+import useLsAgnosticBalance from './useLsAgnosticBalance';
 
-const useLsSpendingLimits = (isNative: boolean, protocolId: LsProtocolId) => {
-  const balance = useAgnosticLsBalance(isNative, protocolId);
+type LsSpendingLimits = {
+  minSpendable: BN | null;
+  maxSpendable: BN | null;
+};
+
+const useLsSpendingLimits = (
+  isNative: boolean,
+  protocolId: LsProtocolId,
+): LsSpendingLimits => {
+  const { balance } = useLsAgnosticBalance(isNative, protocolId);
 
   const { result: existentialDepositAmount } = useApi(
     useCallback((api) => api.consts.balances.existentialDeposit, []),
@@ -21,7 +32,7 @@ const useLsSpendingLimits = (isNative: boolean, protocolId: LsProtocolId) => {
       (api) => {
         const protocol = getLsProtocolDef(protocolId);
 
-        if (protocol.type !== 'parachain') {
+        if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
           return null;
         }
 
@@ -39,7 +50,7 @@ const useLsSpendingLimits = (isNative: boolean, protocolId: LsProtocolId) => {
       (api) => {
         const protocol = getLsProtocolDef(protocolId);
 
-        if (protocol.type !== 'parachain') {
+        if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
           return null;
         }
 
@@ -57,7 +68,7 @@ const useLsSpendingLimits = (isNative: boolean, protocolId: LsProtocolId) => {
     : minimumRedeemAmount;
 
   const minSpendable = useMemo(() => {
-    // TODO: Add ERC20 cases as well.
+    // TODO: Add liquifier cases as well (enough to cover fees?).
 
     if (
       mintingOrRedeemingAmount === null ||
@@ -69,15 +80,8 @@ const useLsSpendingLimits = (isNative: boolean, protocolId: LsProtocolId) => {
     return BN.max(mintingOrRedeemingAmount, existentialDepositAmount);
   }, [existentialDepositAmount, mintingOrRedeemingAmount]);
 
-  const maxSpendable = (() => {
-    if (balance === null || typeof balance === 'string') {
-      return null;
-    }
-
-    return balance;
-  })();
-
-  return { minSpendable, maxSpendable };
+  // TODO: Properly handle error state of maxSpendable.
+  return { minSpendable, maxSpendable: balance instanceof BN ? balance : null };
 };
 
 export default useLsSpendingLimits;
diff --git a/apps/tangle-dapp/components/LiquidStaking/unlockNftsTable/UnlockNftsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/unlockNftsTable/UnlockNftsTable.tsx
deleted file mode 100644
index 7c7a73a7ed..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/unlockNftsTable/UnlockNftsTable.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-'use client';
-
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  TableOptions,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  ArrowRightUp,
-  CheckboxCircleFill,
-  TimeFillIcon,
-} from '@webb-tools/icons';
-import {
-  CheckBox,
-  fuzzyFilter,
-  Table,
-  TANGLE_DOCS_URL,
-  Typography,
-} from '@webb-tools/webb-ui-components';
-import { FC, ReactNode, useMemo } from 'react';
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import { LsErc20TokenId } from '../../../constants/liquidStaking/types';
-import useLiquifierNftUnlocks, {
-  LiquifierUnlockNft,
-} from '../../../data/liquifier/useLiquifierNftUnlocks';
-import useEvmAddress20 from '../../../hooks/useEvmAddress';
-import addCommasToNumber from '../../../utils/addCommasToNumber';
-import GlassCard from '../../GlassCard';
-import { HeaderCell } from '../../tableCells';
-import TokenAmountCell from '../../tableCells/TokenAmountCell';
-import ExternalLink from '../ExternalLink';
-import TableRowsSkeleton from '../TableRowsSkeleton';
-
-const columnHelper = createColumnHelper<LiquifierUnlockNft>();
-
-const columns = [
-  columnHelper.accessor('unlockId', {
-    header: () => <HeaderCell title="Unlock ID" className="justify-start" />,
-    cell: (props) => {
-      return (
-        <div className="flex items-center justify-start gap-2">
-          <CheckBox
-            isChecked={props.row.getIsSelected()}
-            isDisabled={!props.row.getCanSelect()}
-            onChange={props.row.getToggleSelectedHandler()}
-            wrapperClassName="pt-0.5 flex items-center justify-center"
-          />
-
-          {addCommasToNumber(props.getValue())}
-        </div>
-      );
-    },
-  }),
-  columnHelper.accessor('progress', {
-    header: () => <HeaderCell title="Progress" className="justify-center" />,
-    cell: (props) => {
-      const progress = props.getValue();
-
-      const progressString = (() => {
-        if (progress === 100) {
-          return undefined;
-        }
-
-        return progress.toFixed(2) + '%';
-      })();
-
-      const content =
-        progressString === undefined ? (
-          <CheckboxCircleFill className="dark:fill-green-50" />
-        ) : (
-          <div className="flex gap-1 items-center justify-center">
-            <TimeFillIcon className="dark:fill-blue-50" /> {progressString}
-          </div>
-        );
-
-      return <div className="flex items-center justify-start">{content}</div>;
-    },
-  }),
-  columnHelper.accessor('amount', {
-    header: () => <HeaderCell title="Amount" className="justify-center" />,
-    cell: (props) => {
-      const unstakeRequest = props.row.original;
-
-      return (
-        <TokenAmountCell
-          amount={props.getValue()}
-          tokenSymbol={unstakeRequest.symbol}
-          // TODO: Handle decimals.
-          // decimals={props.row.original.decimals}
-          decimals={18}
-          className="text-left"
-        />
-      );
-    },
-  }),
-  // TODO: Name, validator, and maturity date (time left) columns. Also add an info icon tooltip for the maturity date to show the exact unlock date on hover.
-];
-
-type UnlockNftsTableProps = {
-  tokenId: LsErc20TokenId;
-};
-
-const UnlockNftsTable: FC<UnlockNftsTableProps> = ({ tokenId }) => {
-  const evmAddress20 = useEvmAddress20();
-  const rows = useLiquifierNftUnlocks(tokenId);
-
-  const tableOptions = useMemo<TableOptions<LiquifierUnlockNft>>(
-    () => ({
-      // In case that the data is not loaded yet, use an empty array
-      // to avoid TypeScript errors.
-      data: rows ?? [],
-      columns,
-      filterFns: {
-        fuzzy: fuzzyFilter,
-      },
-      // getRowId: (row) => row.unlockId.toString(),
-      globalFilterFn: fuzzyFilter,
-      getCoreRowModel: getCoreRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      enableRowSelection: true,
-    }),
-    [rows],
-  );
-
-  const tableProps = useReactTable(tableOptions);
-  // const tablePropsRows = tableProps.getSelectedRowModel().rows;
-
-  // const selectedRowsUnlockIds = useMemo<Set<number>>(() => {
-  //   const selectedRows = tablePropsRows.map((row) => row.original.unlockId);
-
-  //   return new Set(selectedRows);
-  // }, [tablePropsRows]);
-
-  // Note that memoizing this will cause the table to not update
-  // when the selected rows change.
-  const table = (() => {
-    // No account connected.
-    if (evmAddress20 === null) {
-      return (
-        <Notice
-          title="No account connected"
-          content="Once an account is connected, you will be able to see information about your unstake requests, including the amount, status, and actions you can take."
-        />
-      );
-    }
-    // Data still loading.
-    else if (rows === null) {
-      return (
-        <Notice
-          title="Unstake requests"
-          content={<TableRowsSkeleton rowCount={5} />}
-        />
-      );
-    }
-    // No unstake requests.
-    else if (rows.length === 0) {
-      return (
-        <Notice
-          title="No unstake requests"
-          content="You will be able to withdraw your tokens after the unstake request has been processed. Schedule an unstake request to get started."
-        />
-      );
-    }
-
-    return (
-      <Table
-        thClassName="!bg-inherit border-t-0 bg-mono-0 !px-3 !py-2 whitespace-nowrap"
-        trClassName="!bg-inherit"
-        tdClassName="!bg-inherit !px-3 !py-2 whitespace-nowrap"
-        tableProps={tableProps}
-        totalRecords={rows.length}
-      />
-    );
-  })();
-
-  // Can only withdraw all selected unstake requests if they
-  // have all completed their unlocking period.
-  // const _canWithdrawAllSelected = useMemo(() => {
-  //   // No rows selected or not loaded yet.
-  //   if (selectedRowsUnlockIds.size === 0 || rows === null) {
-  //     return false;
-  //   }
-
-  //   const unlockIds = Array.from(selectedRowsUnlockIds);
-
-  //   // Check that all selected rows have completed their unlocking
-  //   // period.
-  //   return unlockIds.every((unlockId) => {
-  //     const request = rows.find((request) => request.unlockId === unlockId);
-
-  //     assert(
-  //       request !== undefined,
-  //       'All unlock ids should have a corresponding request',
-  //     );
-
-  //     return request.progress === 100;
-  //   });
-  // }, [selectedRowsUnlockIds, rows]);
-
-  return (
-    <div className="space-y-4 flex-grow max-w-[700px]">
-      <GlassCard
-        className={twMerge(
-          rows !== null &&
-            rows.length > 0 &&
-            'flex flex-col justify-between min-h-[500px]',
-        )}
-      >
-        {table}
-
-        {rows !== null && rows.length > 0 && (
-          <div className="flex gap-3 items-center justify-center">
-            {/* TODO: Add the rebond and withdraw buttons. */}
-            {/* <RebondLstUnstakeRequestButton
-              // Can only rebond if there are selected rows.
-              isDisabled={selectedRowsUnlockIds.size === 0}
-              currenciesAndUnlockIds={currenciesAndUnlockIds}
-            />
-
-            <WithdrawLstUnstakeRequestButton
-              canWithdraw={canWithdrawAllSelected}
-              currenciesAndUnlockIds={currenciesAndUnlockIds}
-            /> */}
-          </div>
-        )}
-      </GlassCard>
-
-      {rows !== null && rows.length === 0 && (
-        <div className="flex items-center justify-end w-full">
-          <ExternalLink Icon={ArrowRightUp} href={TANGLE_DOCS_URL}>
-            View Docs
-          </ExternalLink>
-        </div>
-      )}
-    </div>
-  );
-};
-
-type NoticeProps = {
-  title: string;
-  content: string | ReactNode;
-};
-
-/** @internal */
-const Notice: FC<NoticeProps> = ({ title, content }) => {
-  return (
-    <div className="flex flex-col items-start justify-center gap-4">
-      <Typography className="dark:text-mono-0" variant="body1" fw="bold">
-        {title}
-      </Typography>
-
-      {typeof content === 'string' ? (
-        <Typography variant="body2" fw="normal">
-          {content}
-        </Typography>
-      ) : (
-        content
-      )}
-    </div>
-  );
-};
-
-export default React.memo(UnlockNftsTable);
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/RebondLstUnstakeRequestButton.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/RebondLstUnstakeRequestButton.tsx
index 299021124c..d9654fe684 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/RebondLstUnstakeRequestButton.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/RebondLstUnstakeRequestButton.tsx
@@ -41,9 +41,15 @@ const RebondLstUnstakeRequestButton: FC<RebondLstUnstakeRequestButtonProps> = ({
     <>
       <Button
         variant="secondary"
-        isDisabled={isDisabled || executeRebondTx === null}
+        isDisabled={
+          isDisabled ||
+          executeRebondTx === null ||
+          currenciesAndUnlockIds.length === 0
+        }
         onClick={() => setIsConfirmationModalOpen(true)}
         isFullWidth
+        isLoading={rebondTxStatus === TxStatus.PROCESSING}
+        loadingText="Processing"
       >
         Cancel Unstake
       </Button>
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
index e19bcc6116..06d971bc3a 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
@@ -28,27 +28,41 @@ import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import {
-  LsSimpleParachainTimeUnit,
+  LsParachainSimpleTimeUnit,
   ParachainCurrency,
 } from '../../../constants/liquidStaking/types';
-import useSubstrateAddress from '../../../hooks/useSubstrateAddress';
-import { AnySubstrateAddress } from '../../../types/utils';
+import { useLsStore } from '../../../data/liquidStaking/useLsStore';
+import useLiquifierNftUnlocks, {
+  LiquifierUnlockNftMetadata,
+} from '../../../data/liquifier/useLiquifierNftUnlocks';
+import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
+import addCommasToNumber from '../../../utils/addCommasToNumber';
+import isLiquifierProtocolId from '../../../utils/liquidStaking/isLiquifierProtocolId';
+import isLsParachainChainId from '../../../utils/liquidStaking/isLsParachainChainId';
 import stringifyTimeUnit from '../../../utils/liquidStaking/stringifyTimeUnit';
 import GlassCard from '../../GlassCard';
 import { HeaderCell } from '../../tableCells';
 import TokenAmountCell from '../../tableCells/TokenAmountCell';
-import AddressLink from '../AddressLink';
 import ExternalLink from '../ExternalLink';
 import TableRowsSkeleton from '../TableRowsSkeleton';
 import RebondLstUnstakeRequestButton from './RebondLstUnstakeRequestButton';
 import useLstUnlockRequestTableRows from './useLstUnlockRequestTableRows';
 import WithdrawLstUnstakeRequestButton from './WithdrawLstUnstakeRequestButton';
+import WithdrawUnlockNftButton from './WithdrawUnlockNftButton';
 
-export type UnstakeRequestTableRow = {
+export type BaseUnstakeRequest = {
   unlockId: number;
-  address: AnySubstrateAddress;
-  amount: BN;
   decimals: number;
+
+  /**
+   * The underlying stake tokens amount represented by the unlock
+   * request.
+   */
+  amount: BN;
+};
+
+export type ParachainUnstakeRequest = BaseUnstakeRequest & {
+  type: 'parachainUnstakeRequest';
   currency: ParachainCurrency;
 
   /**
@@ -58,61 +72,83 @@ export type UnstakeRequestTableRow = {
    * If this is undefined, it means that the request has
    * completed its unlocking period.
    */
-  remainingTimeUnit?: LsSimpleParachainTimeUnit;
+  progress?: LsParachainSimpleTimeUnit;
 };
 
-const columnHelper = createColumnHelper<UnstakeRequestTableRow>();
+type UnstakeRequestTableRow =
+  | LiquifierUnlockNftMetadata
+  | ParachainUnstakeRequest;
 
-const columns = [
-  columnHelper.accessor('address', {
-    header: () => (
-      <HeaderCell title="Unstake Request" className="justify-start" />
-    ),
+const COLUMN_HELPER = createColumnHelper<UnstakeRequestTableRow>();
+
+const COLUMNS = [
+  COLUMN_HELPER.accessor('unlockId', {
+    header: () => <HeaderCell title="Unlock ID" className="justify-start" />,
     cell: (props) => {
+      const canSelect =
+        props.row.original.type === 'liquifierUnlockNft'
+          ? props.row.original.progress === 1
+          : true;
+
       return (
         <div className="flex items-center justify-start gap-2">
           <CheckBox
             isChecked={props.row.getIsSelected()}
-            isDisabled={!props.row.getCanSelect()}
+            isDisabled={!props.row.getCanSelect() || !canSelect}
             onChange={props.row.getToggleSelectedHandler()}
             wrapperClassName="pt-0.5 flex items-center justify-center"
           />
-
-          <AddressLink address={props.getValue()} />
+          #{addCommasToNumber(props.getValue())}
         </div>
       );
     },
   }),
-  columnHelper.accessor('remainingTimeUnit', {
+  COLUMN_HELPER.accessor('progress', {
     header: () => <HeaderCell title="Status" className="justify-center" />,
     cell: (props) => {
-      const remainingTimeUnit = props.getValue();
+      const progress = props.getValue();
 
-      const remainingString = (() => {
-        if (remainingTimeUnit === undefined) {
+      const progressString = (() => {
+        if (progress === undefined) {
           return undefined;
         }
-
-        return stringifyTimeUnit(remainingTimeUnit).join(' ');
+        // If it's a number (percentage) representing an unlock NFT's
+        // unlocking progress, convert it to a string.
+        else if (typeof progress === 'number') {
+          if (progress === 1) {
+            return undefined;
+          }
+
+          return (progress * 100).toFixed(2) + '%';
+        }
+        // Otherwise, it must be a Parachain unstake request's
+        // remaining time unit.
+        else {
+          return stringifyTimeUnit(progress).join(' ');
+        }
       })();
 
       const content =
-        remainingString === undefined ? (
+        progressString === undefined ? (
           <CheckboxCircleFill className="dark:fill-green-50" />
         ) : (
           <div className="flex gap-1 items-center justify-center">
-            <TimeFillIcon className="dark:fill-blue-50" /> {remainingString}
+            <TimeFillIcon className="dark:fill-blue-50" /> {progressString}
           </div>
         );
 
       return <div className="flex items-center justify-start">{content}</div>;
     },
   }),
-  columnHelper.accessor('amount', {
+  COLUMN_HELPER.accessor('amount', {
     header: () => <HeaderCell title="Amount" className="justify-center" />,
     cell: (props) => {
       const unstakeRequest = props.row.original;
-      const tokenSymbol = unstakeRequest.currency.toUpperCase();
+
+      const tokenSymbol =
+        unstakeRequest.type === 'parachainUnstakeRequest'
+          ? unstakeRequest.currency.toUpperCase()
+          : unstakeRequest.symbol;
 
       return (
         <TokenAmountCell
@@ -123,47 +159,58 @@ const columns = [
         />
       );
     },
+    // TODO: Name, validator, and maturity date (time left) columns. Also add an info icon tooltip for the maturity date to show the exact unlock date on hover.
   }),
 ];
 
 const UnstakeRequestsTable: FC = () => {
-  const substrateAddress = useSubstrateAddress();
-  const rows = useLstUnlockRequestTableRows();
+  const { selectedProtocolId } = useLsStore();
+  const activeAccountAddress = useActiveAccountAddress();
+  const parachainRows = useLstUnlockRequestTableRows();
+  const liquifierRows = useLiquifierNftUnlocks();
+
+  // Select the table rows based on whether the selected protocol
+  // is an EVM-based chain (liquifier contract) or a parachain-based
+  // Substrate chain.
+  const rows = isLiquifierProtocolId(selectedProtocolId)
+    ? liquifierRows
+    : parachainRows;
 
   const tableOptions = useMemo<TableOptions<UnstakeRequestTableRow>>(
     () => ({
       // In case that the data is not loaded yet, use an empty array
       // to avoid TypeScript errors.
       data: rows ?? [],
-      columns,
+      columns: COLUMNS,
       filterFns: {
         fuzzy: fuzzyFilter,
       },
-      // getRowId: (row) => row.unlockId.toString(),
       globalFilterFn: fuzzyFilter,
       getCoreRowModel: getCoreRowModel(),
       getFilteredRowModel: getFilteredRowModel(),
       getSortedRowModel: getSortedRowModel(),
       getPaginationRowModel: getPaginationRowModel(),
       enableRowSelection: true,
+      autoResetPageIndex: false,
+      getRowId: (row) => row.unlockId.toString(),
     }),
     [rows],
   );
 
   const tableProps = useReactTable(tableOptions);
-  const tablePropsRows = tableProps.getSelectedRowModel().rows;
+  const selectedRows = tableProps.getSelectedRowModel().rows;
 
   const selectedRowsUnlockIds = useMemo<Set<number>>(() => {
-    const selectedRows = tablePropsRows.map((row) => row.original.unlockId);
+    const selectedRowsIds = selectedRows.map((row) => row.original.unlockId);
 
-    return new Set(selectedRows);
-  }, [tablePropsRows]);
+    return new Set(selectedRowsIds);
+  }, [selectedRows]);
 
   // Note that memoizing this will cause the table to not update
   // when the selected rows change.
   const table = (() => {
     // No account connected.
-    if (substrateAddress === null) {
+    if (activeAccountAddress === null) {
       return (
         <Notice
           title="No account connected"
@@ -197,6 +244,7 @@ const UnstakeRequestsTable: FC = () => {
         tdClassName="!bg-inherit !px-3 !py-2 whitespace-nowrap"
         tableProps={tableProps}
         totalRecords={rows.length}
+        isPaginated
       />
     );
   })();
@@ -223,41 +271,68 @@ const UnstakeRequestsTable: FC = () => {
 
       // If the remaining time unit is undefined, it means that the
       // request has completed its unlocking period.
-      return request.remainingTimeUnit === undefined;
+      return request.type === 'parachainUnstakeRequest'
+        ? request.progress === undefined
+        : request.progress === 1;
     });
   }, [selectedRowsUnlockIds, rows]);
 
-  const currenciesAndUnlockIds = useMemo<[ParachainCurrency, number][]>(() => {
-    return tablePropsRows.map((row) => {
-      const { currency, unlockId } = row.original;
+  const parachainCurrenciesAndUnlockIds = useMemo<
+    [ParachainCurrency, number][]
+  >(() => {
+    return selectedRows.flatMap((row) => {
+      if (row.original.type !== 'parachainUnstakeRequest') {
+        return [];
+      }
 
-      return [currency, unlockId];
+      return [[row.original.currency, row.original.unlockId]];
     });
-  }, [tablePropsRows]);
+  }, [selectedRows]);
+
+  const nftUnlockIds = useMemo<number[]>(() => {
+    return selectedRows.flatMap((row) => {
+      if (row.original.type !== 'liquifierUnlockNft') {
+        return [];
+      }
+
+      return [row.original.unlockId];
+    });
+  }, [selectedRows]);
+
+  const isDataState =
+    rows !== null && rows.length > 0 && activeAccountAddress !== null;
 
   return (
     <div className="space-y-4 flex-grow max-w-[700px]">
       <GlassCard
         className={twMerge(
-          rows !== null &&
-            rows.length > 0 &&
-            'flex flex-col justify-between min-h-[500px]',
+          isDataState && 'flex flex-col justify-between min-h-[500px]',
         )}
       >
         {table}
 
-        {rows !== null && rows.length > 0 && (
+        {isDataState && (
           <div className="flex gap-3 items-center justify-center">
-            <RebondLstUnstakeRequestButton
-              // Can only rebond if there are selected rows.
-              isDisabled={selectedRowsUnlockIds.size === 0}
-              currenciesAndUnlockIds={currenciesAndUnlockIds}
-            />
-
-            <WithdrawLstUnstakeRequestButton
-              canWithdraw={canWithdrawAllSelected}
-              currenciesAndUnlockIds={currenciesAndUnlockIds}
-            />
+            {isLsParachainChainId(selectedProtocolId) && (
+              <RebondLstUnstakeRequestButton
+                // Can only rebond if there are selected rows.
+                isDisabled={selectedRowsUnlockIds.size === 0}
+                currenciesAndUnlockIds={parachainCurrenciesAndUnlockIds}
+              />
+            )}
+
+            {isLsParachainChainId(selectedProtocolId) ? (
+              <WithdrawLstUnstakeRequestButton
+                canWithdraw={canWithdrawAllSelected}
+                currenciesAndUnlockIds={parachainCurrenciesAndUnlockIds}
+              />
+            ) : (
+              <WithdrawUnlockNftButton
+                tokenId={selectedProtocolId}
+                canWithdraw={canWithdrawAllSelected}
+                unlockIds={nftUnlockIds}
+              />
+            )}
           </div>
         )}
       </GlassCard>
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawLstUnstakeRequestButton.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawLstUnstakeRequestButton.tsx
index 095c290a3a..bd1f8a8eab 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawLstUnstakeRequestButton.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawLstUnstakeRequestButton.tsx
@@ -30,7 +30,7 @@ const WithdrawLstUnstakeRequestButton: FC<
     }
   }, [withdrawRedeemTxStatus]);
 
-  const handleConfirmation = useCallback(() => {
+  const handleClick = useCallback(() => {
     // The button should have been disabled if this was null.
     assert(
       executeWithdrawRedeemTx !== null,
@@ -43,10 +43,16 @@ const WithdrawLstUnstakeRequestButton: FC<
   return (
     <>
       <Button
-        variant="secondary"
-        isDisabled={!canWithdraw}
-        onClick={handleConfirmation}
+        variant="primary"
+        isDisabled={
+          !canWithdraw ||
+          executeWithdrawRedeemTx === null ||
+          currenciesAndUnlockIds.length === 0
+        }
+        onClick={handleClick}
         isFullWidth
+        isLoading={withdrawRedeemTxStatus === TxStatus.PROCESSING}
+        loadingText="Processing"
       >
         Withdraw
       </Button>
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawUnlockNftButton.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawUnlockNftButton.tsx
new file mode 100644
index 0000000000..03ea896616
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/WithdrawUnlockNftButton.tsx
@@ -0,0 +1,60 @@
+import { Button } from '@webb-tools/webb-ui-components';
+import { FC, useCallback, useState } from 'react';
+
+import { LsLiquifierProtocolId } from '../../../constants/liquidStaking/types';
+import useLiquifierWithdraw from '../../../data/liquifier/useLiquifierWithdraw';
+
+type WithdrawUnlockNftButtonProps = {
+  tokenId: LsLiquifierProtocolId;
+  canWithdraw: boolean;
+  unlockIds: number[];
+};
+
+const WithdrawUnlockNftButton: FC<WithdrawUnlockNftButtonProps> = ({
+  tokenId,
+  canWithdraw,
+  unlockIds,
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const withdraw = useLiquifierWithdraw();
+
+  const handleClick = useCallback(async () => {
+    if (withdraw === null) {
+      return;
+    }
+
+    setIsProcessing(true);
+
+    for (const [index, unlockId] of unlockIds.entries()) {
+      const success = await withdraw(tokenId, unlockId, {
+        current: index + 1,
+        total: unlockIds.length,
+      });
+
+      if (!success) {
+        console.error(
+          'Liquifier withdraw batch was aborted because one request failed',
+        );
+
+        break;
+      }
+    }
+
+    setIsProcessing(false);
+  }, [tokenId, unlockIds, withdraw]);
+
+  return (
+    <Button
+      variant="primary"
+      isDisabled={!canWithdraw || unlockIds.length === 0 || withdraw === null}
+      onClick={handleClick}
+      isFullWidth
+      isLoading={isProcessing}
+      loadingText="Processing"
+    >
+      Withdraw
+    </Button>
+  );
+};
+
+export default WithdrawUnlockNftButton;
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/useLstUnlockRequestTableRows.ts b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/useLstUnlockRequestTableRows.ts
index 0d32a5fdda..3534fae535 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/useLstUnlockRequestTableRows.ts
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/useLstUnlockRequestTableRows.ts
@@ -2,17 +2,16 @@ import assert from 'assert';
 import { useMemo } from 'react';
 
 import { LS_PARACHAIN_CHAIN_MAP } from '../../../constants/liquidStaking/constants';
-import { LsSimpleParachainTimeUnit } from '../../../constants/liquidStaking/types';
+import { LsParachainSimpleTimeUnit } from '../../../constants/liquidStaking/types';
 import useLstUnlockRequests from '../../../data/liquidStaking/useLstUnlockRequests';
 import useOngoingTimeUnits from '../../../data/liquidStaking/useOngoingTimeUnits';
-import { AnySubstrateAddress } from '../../../types/utils';
-import { UnstakeRequestTableRow } from './UnstakeRequestsTable';
+import { ParachainUnstakeRequest } from './UnstakeRequestsTable';
 
 const useLstUnlockRequestTableRows = () => {
   const tokenUnlockLedger = useLstUnlockRequests();
   const ongoingTimeUnits = useOngoingTimeUnits();
 
-  const rows = useMemo<UnstakeRequestTableRow[] | null>(() => {
+  const rows = useMemo<ParachainUnstakeRequest[] | null>(() => {
     // Data not loaded yet.
     if (tokenUnlockLedger === null || ongoingTimeUnits === null) {
       return null;
@@ -54,7 +53,7 @@ const useLstUnlockRequestTableRows = () => {
         const remainingTimeUnitValue =
           request.unlockTimeUnit.value - ongoingTimeUnitEntry.timeUnit.value;
 
-        const remainingTimeUnit: LsSimpleParachainTimeUnit | undefined =
+        const remainingTimeUnit: LsParachainSimpleTimeUnit | undefined =
           remainingTimeUnitValue <= 0
             ? undefined
             : {
@@ -63,14 +62,13 @@ const useLstUnlockRequestTableRows = () => {
               };
 
         return {
+          type: 'parachainUnstakeRequest',
           unlockId: request.unlockId,
           amount: request.amount,
-          // TODO: Using dummy address for now.
-          address: '0xef1234567890abcdef123456789' as AnySubstrateAddress,
           currency: request.currency,
           decimals: chain.decimals,
-          remainingTimeUnit,
-        } satisfies UnstakeRequestTableRow;
+          progress: remainingTimeUnit,
+        } satisfies ParachainUnstakeRequest;
       });
   }, [ongoingTimeUnits, tokenUnlockLedger]);
 
diff --git a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx
index fbb07992ed..2fc775a9ce 100644
--- a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx
+++ b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx
@@ -23,11 +23,11 @@ import { twMerge } from 'tailwind-merge';
 
 import { IS_PRODUCTION_ENV } from '../../constants/env';
 import useNetworkStore from '../../context/useNetworkStore';
-import { useLiquidStakingStore } from '../../data/liquidStaking/useLiquidStakingStore';
+import { useLsStore } from '../../data/liquidStaking/useLsStore';
 import useNetworkSwitcher from '../../hooks/useNetworkSwitcher';
 import { PagePath } from '../../types';
 import createCustomNetwork from '../../utils/createCustomNetwork';
-import isLsErc20TokenId from '../../utils/liquidStaking/isLsErc20TokenId';
+import isLiquifierProtocolId from '../../utils/liquidStaking/isLiquifierProtocolId';
 import { NetworkSelectorDropdown } from './NetworkSelectorDropdown';
 
 // TODO: Currently hard-coded, but shouldn't it always be the Tangle icon, since it's not switching chains but rather networks within Tangle? If so, find some constant somewhere instead of having it hard-coded here.
@@ -40,7 +40,7 @@ const NetworkSelectionButton: FC = () => {
   const { network } = useNetworkStore();
   const { switchNetwork, isCustom } = useNetworkSwitcher();
   const pathname = usePathname();
-  const { selectedProtocolId } = useLiquidStakingStore();
+  const { selectedProtocolId } = useLsStore();
 
   // TODO: Handle switching network on EVM wallet here.
   const switchToCustomNetwork = useCallback(
@@ -99,13 +99,13 @@ const NetworkSelectionButton: FC = () => {
   // Network can't be switched from the Tangle Restaking Parachain while
   // on liquid staking page.
   else if (isInLiquidStakingPath) {
-    const liquidStakingNetworkName = isLsErc20TokenId(selectedProtocolId)
+    const liquidStakingNetworkName = isLiquifierProtocolId(selectedProtocolId)
       ? IS_PRODUCTION_ENV
         ? 'Ethereum Mainnet'
         : 'Sepolia Testnet'
       : TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.name;
 
-    const chainIconName = isLsErc20TokenId(selectedProtocolId)
+    const chainIconName = isLiquifierProtocolId(selectedProtocolId)
       ? 'ethereum'
       : TANGLE_TESTNET_CHAIN_NAME;
 
diff --git a/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx b/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
index 40bbca1501..7ed0a40ed1 100644
--- a/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
+++ b/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
@@ -37,7 +37,7 @@ import { ValidatorTableProps } from './types';
 
 const columnHelper = createColumnHelper<Validator>();
 
-const getStaticColumns = (isWaiting?: boolean) => [
+const getTableColumns = (isWaiting?: boolean) => [
   // Hide the effective amount staked and self-staked columns on waiting validators tab
   // as they don't have values for these columns
   ...(isWaiting
@@ -167,7 +167,7 @@ const ValidatorTable: FC<ValidatorTableProps> = ({
           );
         },
       }),
-      ...getStaticColumns(isWaiting),
+      ...getTableColumns(isWaiting),
     ],
     [isWaiting, network.nativeExplorerUrl, network.polkadotJsDashboardUrl],
   );
diff --git a/apps/tangle-dapp/constants/index.ts b/apps/tangle-dapp/constants/index.ts
index 29b912984a..62c5d10722 100644
--- a/apps/tangle-dapp/constants/index.ts
+++ b/apps/tangle-dapp/constants/index.ts
@@ -60,6 +60,7 @@ export enum TxName {
   LS_LIQUIFIER_APPROVE = 'approve spending for liquifier',
   LS_LIQUIFIER_DEPOSIT = 'liquifier deposit',
   LS_LIQUIFIER_UNLOCK = 'liquifier unlock',
+  LS_LIQUIFIER_WITHDRAW = 'liquifier withdraw',
 }
 
 export const PAYMENT_DESTINATION_OPTIONS: StakingRewardsDestinationDisplayText[] =
diff --git a/apps/tangle-dapp/constants/liquidStaking/constants.ts b/apps/tangle-dapp/constants/liquidStaking/constants.ts
index b1236ed4a9..7b8c1c6ab8 100644
--- a/apps/tangle-dapp/constants/liquidStaking/constants.ts
+++ b/apps/tangle-dapp/constants/liquidStaking/constants.ts
@@ -1,12 +1,18 @@
-import { HexString } from '@polkadot/util/types';
-import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config';
-import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
-
-import { CrossChainTimeUnit } from '../../utils/CrossChainTime';
+import ASTAR from '../../data/liquidStaking/adapters/astar';
+import CHAINLINK from '../../data/liquidStaking/adapters/chainlink';
+import LIVEPEER from '../../data/liquidStaking/adapters/livepeer';
+import MANTA from '../../data/liquidStaking/adapters/manta';
+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 THE_GRAPH from '../../data/liquidStaking/adapters/theGraph';
 import { IS_PRODUCTION_ENV } from '../env';
 import {
-  LsErc20TokenDef,
-  LsErc20TokenId,
+  LsLiquifierProtocolDef,
+  LsLiquifierProtocolId,
+  LsNetwork,
+  LsNetworkId,
   LsParachainChainDef,
   LsParachainChainId,
   LsParachainToken,
@@ -15,185 +21,11 @@ import {
   LsToken,
 } from './types';
 
-/**
- * Development only. Sepolia testnet contracts that were
- * deployed to test the liquifier functionality. These contracts
- * use dummy data.
- */
-const SEPOLIA_TESTNET_CONTRACTS = {
-  LIQUIFIER: '0xCE0148DbA55c9719B59642f5cBf4F26e67F44E70',
-  ERC20: '0x2eE951c2d215ba1b3E0DF20764c96a0bC7809F41',
-  // Use the same address as the dummy ERC20 contract.
-  TG_TOKEN: '0x2eE951c2d215ba1b3E0DF20764c96a0bC7809F41',
-} as const satisfies Record<string, HexString>;
-
-const CHAINLINK: LsErc20TokenDef = {
-  type: 'erc20',
-  id: LsProtocolId.CHAINLINK,
-  name: 'Chainlink',
-  chainIconFileName: 'chainlink',
-  token: LsToken.LINK,
-  decimals: 18,
-  address: IS_PRODUCTION_ENV
-    ? '0x514910771AF9Ca656af840dff83E8264EcF986CA'
-    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
-  // TODO: Use the actual Chainlink Liquifier Adapter address. This is likely deployed to a testnet (Tenderly?).
-  liquifierAdapterAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
-  liquifierTgTokenAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
-  timeUnit: CrossChainTimeUnit.DAY,
-  unstakingPeriod: 7,
-};
-
-const THE_GRAPH: LsErc20TokenDef = {
-  type: 'erc20',
-  id: LsProtocolId.THE_GRAPH,
-  name: 'The Graph',
-  chainIconFileName: 'the-graph',
-  token: LsToken.GRT,
-  decimals: 18,
-  address: IS_PRODUCTION_ENV
-    ? '0xc944E90C64B2c07662A292be6244BDf05Cda44a7'
-    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
-  // TODO: Use the actual Chainlink Liquifier Adapter address. This is likely deployed to a testnet (Tenderly?).
-  liquifierAdapterAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
-  liquifierTgTokenAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
-  timeUnit: CrossChainTimeUnit.DAY,
-  unstakingPeriod: 28,
-};
-
-const LIVEPEER: LsErc20TokenDef = {
-  type: 'erc20',
-  id: LsProtocolId.LIVEPEER,
-  name: 'Livepeer',
-  chainIconFileName: 'livepeer',
-  token: LsToken.LPT,
-  decimals: 18,
-  address: IS_PRODUCTION_ENV
-    ? '0x58b6A8A3302369DAEc383334672404Ee733aB239'
-    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
-  // TODO: Use the actual Chainlink Liquifier Adapter address. This is likely deployed to a testnet (Tenderly?).
-  liquifierAdapterAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
-  liquifierTgTokenAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
-  timeUnit: CrossChainTimeUnit.LIVEPEER_ROUND,
-  unstakingPeriod: 7,
-};
-
-const POLYGON: LsErc20TokenDef = {
-  type: 'erc20',
-  id: LsProtocolId.POLYGON,
-  name: 'Polygon',
-  chainIconFileName: 'polygon',
-  token: LsToken.POL,
-  decimals: 18,
-  // TODO: Use Liquifier's testnet address if the environment is development.
-  address: IS_PRODUCTION_ENV
-    ? '0x0D500B1d8E8eF31E21C99d1Db9A6444d3ADf1270'
-    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
-  // TODO: Use the actual Chainlink Liquifier Adapter address. This is likely deployed to a testnet (Tenderly?).
-  liquifierAdapterAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
-  liquifierTgTokenAddress: IS_PRODUCTION_ENV
-    ? '0x'
-    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
-  timeUnit: CrossChainTimeUnit.POLYGON_CHECKPOINT,
-  unstakingPeriod: 82,
-};
-
-const POLKADOT: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.POLKADOT,
-  name: 'Polkadot',
-  token: LsToken.DOT,
-  chainIconFileName: 'polkadot',
-  currency: 'Dot',
-  decimals: 10,
-  rpcEndpoint: 'wss://polkadot-rpc.dwellir.com',
-  timeUnit: CrossChainTimeUnit.POLKADOT_ERA,
-  unstakingPeriod: 28,
-};
-
-const PHALA: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.PHALA,
-  name: 'Phala',
-  token: LsToken.PHALA,
-  chainIconFileName: 'phala',
-  currency: 'Pha',
-  decimals: 18,
-  rpcEndpoint: 'wss://api.phala.network/ws',
-  timeUnit: CrossChainTimeUnit.DAY,
-  unstakingPeriod: 7,
-};
-
-const MOONBEAM: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.MOONBEAM,
-  name: 'Moonbeam',
-  token: LsToken.GLMR,
-  chainIconFileName: 'moonbeam',
-  // TODO: No currency entry for GLMR in the Tangle Primitives?
-  currency: 'Dot',
-  decimals: 18,
-  rpcEndpoint: 'wss://moonbeam.api.onfinality.io/public-ws',
-  timeUnit: CrossChainTimeUnit.MOONBEAM_ROUND,
-  unstakingPeriod: 28,
-};
-
-const ASTAR: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.ASTAR,
-  name: 'Astar',
-  token: LsToken.ASTAR,
-  chainIconFileName: 'astar',
-  // TODO: No currency entry for ASTAR in the Tangle Primitives?
-  currency: 'Dot',
-  decimals: 18,
-  rpcEndpoint: 'wss://astar.api.onfinality.io/public-ws',
-  timeUnit: CrossChainTimeUnit.ASTAR_ERA,
-  unstakingPeriod: 7,
-};
-
-const MANTA: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.MANTA,
-  name: 'Manta',
-  token: LsToken.MANTA,
-  chainIconFileName: 'manta',
-  // TODO: No currency entry for ASTAR in the Tangle Primitives?
-  currency: 'Dot',
-  decimals: 18,
-  rpcEndpoint: 'wss://ws.manta.systems',
-  timeUnit: CrossChainTimeUnit.DAY,
-  unstakingPeriod: 7,
-};
-
-const TANGLE_RESTAKING_PARACHAIN: LsParachainChainDef = {
-  type: 'parachain',
-  id: LsProtocolId.TANGLE_RESTAKING_PARACHAIN,
-  name: 'Tangle Parachain',
-  token: LsToken.TNT,
-  chainIconFileName: 'tangle',
-  currency: 'Bnc',
-  decimals: TANGLE_TOKEN_DECIMALS,
-  rpcEndpoint: TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.wsRpcEndpoint,
-  timeUnit: CrossChainTimeUnit.TANGLE_RESTAKING_PARACHAIN_ERA,
-  // TODO: The Tangle Restaking Parachain is a special case.
-  unstakingPeriod: 0,
-};
+export const LS_REGISTRY_ADDRESS = IS_PRODUCTION_ENV
+  ? '0x'
+  : '0xCFF6785AC20878250b3FE70152905cEed38cf554';
 
+// TODO: Find a way to avoid casting. Some type errors are being pesky.
 export const LS_PARACHAIN_CHAIN_MAP: Record<
   LsParachainChainId,
   LsParachainChainDef
@@ -203,10 +35,12 @@ export const LS_PARACHAIN_CHAIN_MAP: Record<
   [LsProtocolId.MOONBEAM]: MOONBEAM,
   [LsProtocolId.ASTAR]: ASTAR,
   [LsProtocolId.MANTA]: MANTA,
-  [LsProtocolId.TANGLE_RESTAKING_PARACHAIN]: TANGLE_RESTAKING_PARACHAIN,
-};
+} as Record<LsParachainChainId, LsParachainChainDef>;
 
-export const LS_ERC20_TOKEN_MAP: Record<LsErc20TokenId, LsErc20TokenDef> = {
+export const LS_LIQUIFIER_PROTOCOL_MAP: Record<
+  LsLiquifierProtocolId,
+  LsLiquifierProtocolDef
+> = {
   [LsProtocolId.CHAINLINK]: CHAINLINK,
   [LsProtocolId.THE_GRAPH]: THE_GRAPH,
   [LsProtocolId.LIVEPEER]: LIVEPEER,
@@ -215,20 +49,20 @@ export const LS_ERC20_TOKEN_MAP: Record<LsErc20TokenId, LsErc20TokenDef> = {
 
 export const LS_PROTOCOLS: LsProtocolDef[] = [
   ...Object.values(LS_PARACHAIN_CHAIN_MAP),
-  ...Object.values(LS_ERC20_TOKEN_MAP),
+  ...Object.values(LS_LIQUIFIER_PROTOCOL_MAP),
 ];
 
-export const LS_ERC20_TOKEN_IDS = [
+export const LS_LIQUIFIER_PROTOCOL_IDS = [
   LsProtocolId.CHAINLINK,
   LsProtocolId.THE_GRAPH,
   LsProtocolId.LIVEPEER,
   LsProtocolId.POLYGON,
-] as const satisfies LsErc20TokenId[];
+] as const satisfies LsLiquifierProtocolId[];
 
 export const LS_PARACHAIN_CHAIN_IDS = Object.values(LsProtocolId).filter(
   (value): value is LsParachainChainId =>
     typeof value !== 'string' &&
-    !LS_ERC20_TOKEN_IDS.includes(value as LsErc20TokenId),
+    !LS_LIQUIFIER_PROTOCOL_IDS.includes(value as LsLiquifierProtocolId),
 ) satisfies LsParachainChainId[];
 
 export const LS_PARACHAIN_TOKENS = [
@@ -243,4 +77,26 @@ export const LS_PARACHAIN_TOKENS = [
 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.";
 
-export const LST_PREFIX = 'tg';
+export const LS_DERIVATIVE_TOKEN_PREFIX = 'tg';
+
+export const LS_ETHEREUM_MAINNET_LIQUIFIER: LsNetwork = {
+  type: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER,
+  networkName: IS_PRODUCTION_ENV ? 'Ethereum Mainnet' : 'Sepolia Testnet',
+  chainIconFileName: 'ethereum',
+  defaultProtocolId: LsProtocolId.CHAINLINK,
+  protocols: [CHAINLINK, THE_GRAPH, LIVEPEER, POLYGON],
+};
+
+export const LS_TANGLE_RESTAKING_PARACHAIN: LsNetwork = {
+  type: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  networkName: 'Tangle Parachain',
+  chainIconFileName: 'tangle',
+  defaultProtocolId: LsProtocolId.POLKADOT,
+  // TODO: Find a way to avoid casting. Some type errors are being pesky.
+  protocols: [POLKADOT, PHALA, MOONBEAM, ASTAR, MANTA] as LsProtocolDef[],
+};
+
+export const LS_NETWORKS: LsNetwork[] = [
+  LS_ETHEREUM_MAINNET_LIQUIFIER,
+  LS_TANGLE_RESTAKING_PARACHAIN,
+];
diff --git a/apps/tangle-dapp/constants/liquidStaking/devConstants.ts b/apps/tangle-dapp/constants/liquidStaking/devConstants.ts
new file mode 100644
index 0000000000..c966626e65
--- /dev/null
+++ b/apps/tangle-dapp/constants/liquidStaking/devConstants.ts
@@ -0,0 +1,14 @@
+import { HexString } from '@polkadot/util/types';
+
+/**
+ * Development only. Sepolia testnet contracts that were
+ * deployed to test the liquifier functionality. These contracts
+ * use dummy data.
+ */
+export const SEPOLIA_TESTNET_CONTRACTS = {
+  LIQUIFIER: '0x3D65A0aae9c42A26814C4F4cF7C92dC37114a476',
+  ERC20: '0x2eE951c2d215ba1b3E0DF20764c96a0bC7809F41',
+  // Use the same address as the dummy ERC20 contract.
+  TG_TOKEN: '0x2eE951c2d215ba1b3E0DF20764c96a0bC7809F41',
+  UNLOCKS: '0x32d70bC73d0965209Cf175711b010dE6A7650c2B',
+} as const satisfies Record<string, HexString>;
diff --git a/apps/tangle-dapp/constants/liquidStaking/liquifierAdapterAbi.ts b/apps/tangle-dapp/constants/liquidStaking/liquifierAdapterAbi.ts
index cca7edef0d..92e37c7bae 100644
--- a/apps/tangle-dapp/constants/liquidStaking/liquifierAdapterAbi.ts
+++ b/apps/tangle-dapp/constants/liquidStaking/liquifierAdapterAbi.ts
@@ -341,6 +341,18 @@ const LIQUIFIER_ADAPTER_ABI = [
     name: 'DepositBufferedTokens',
     type: 'event',
   },
+  {
+    name: 'totalShares',
+    type: 'function',
+    inputs: [],
+    stateMutability: 'view',
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+      },
+    ],
+  },
 ] as const satisfies Abi;
 
 export default LIQUIFIER_ADAPTER_ABI;
diff --git a/apps/tangle-dapp/constants/liquidStaking/liquifierRegistryAbi.ts b/apps/tangle-dapp/constants/liquidStaking/liquifierRegistryAbi.ts
new file mode 100644
index 0000000000..4844bc35d0
--- /dev/null
+++ b/apps/tangle-dapp/constants/liquidStaking/liquifierRegistryAbi.ts
@@ -0,0 +1,211 @@
+import { Abi } from 'viem';
+
+const LIQUIFIER_REGISTRY_ABI = [
+  // Constructor
+  {
+    type: 'constructor',
+    stateMutability: 'nonpayable',
+    inputs: [],
+  },
+
+  // Initialize function
+  {
+    type: 'function',
+    name: 'initialize',
+    inputs: [
+      { internalType: 'address', name: '_liquifier', type: 'address' },
+      { internalType: 'address', name: '_unlocks', type: 'address' },
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+
+  // Getters
+  {
+    type: 'function',
+    name: 'adapter',
+    inputs: [{ internalType: 'address', name: 'asset', type: 'address' }],
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'liquifier',
+    inputs: [],
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'treasury',
+    inputs: [],
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'unlocks',
+    inputs: [],
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'fee',
+    inputs: [{ internalType: 'address', name: 'asset', type: 'address' }],
+    outputs: [{ internalType: 'uint96', name: '', type: 'uint96' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'isLiquifier',
+    inputs: [{ internalType: 'address', name: 'liquifier', type: 'address' }],
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'getLiquifier',
+    inputs: [
+      { internalType: 'address', name: 'asset', type: 'address' },
+      { internalType: 'address', name: 'validator', type: 'address' },
+    ],
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+
+  // Setters
+  {
+    type: 'function',
+    name: 'registerAdapter',
+    inputs: [
+      { internalType: 'address', name: 'asset', type: 'address' },
+      { internalType: 'address', name: 'adapter', type: 'address' },
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'registerLiquifier',
+    inputs: [
+      { internalType: 'address', name: 'asset', type: 'address' },
+      { internalType: 'address', name: 'validator', type: 'address' },
+      { internalType: 'address', name: 'liquifier', type: 'address' },
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'setFee',
+    inputs: [
+      { internalType: 'address', name: 'asset', type: 'address' },
+      { internalType: 'uint96', name: 'fee', type: 'uint96' },
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'setTreasury',
+    inputs: [{ internalType: 'address', name: 'treasury', type: 'address' }],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+
+  // Required by UUPSUpgradeable
+  {
+    type: 'function',
+    name: '_authorizeUpgrade',
+    inputs: [{ internalType: 'address', name: '', type: 'address' }],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+
+  // Events
+  {
+    type: 'event',
+    name: 'AdapterRegistered',
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'asset',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'adapter',
+        type: 'address',
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: 'event',
+    name: 'NewLiquifier',
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'asset',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'validator',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'address',
+        name: 'liquifier',
+        type: 'address',
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: 'event',
+    name: 'FeeAdjusted',
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'asset',
+        type: 'address',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'newFee',
+        type: 'uint256',
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'oldFee',
+        type: 'uint256',
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: 'event',
+    name: 'TreasurySet',
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'treasury',
+        type: 'address',
+      },
+    ],
+    anonymous: false,
+  },
+] as const satisfies Abi;
+
+export default LIQUIFIER_REGISTRY_ABI;
diff --git a/apps/tangle-dapp/constants/liquidStaking/types.ts b/apps/tangle-dapp/constants/liquidStaking/types.ts
index 514232fed5..e9353e2a80 100644
--- a/apps/tangle-dapp/constants/liquidStaking/types.ts
+++ b/apps/tangle-dapp/constants/liquidStaking/types.ts
@@ -5,6 +5,10 @@ import {
 import { BN } from '@polkadot/util';
 import { HexString } from '@polkadot/util/types';
 
+import {
+  LsNetworkEntityAdapter,
+  ProtocolEntity,
+} from '../../data/liquidStaking/adapter';
 import { CrossChainTimeUnit } from '../../utils/CrossChainTime';
 
 export enum LsProtocolId {
@@ -13,20 +17,19 @@ export enum LsProtocolId {
   MOONBEAM,
   ASTAR,
   MANTA,
-  TANGLE_RESTAKING_PARACHAIN,
   CHAINLINK,
   THE_GRAPH,
   LIVEPEER,
   POLYGON,
 }
 
-export type LsErc20TokenId =
+export type LsLiquifierProtocolId =
   | LsProtocolId.CHAINLINK
   | LsProtocolId.THE_GRAPH
   | LsProtocolId.LIVEPEER
   | LsProtocolId.POLYGON;
 
-export type LsParachainChainId = Exclude<LsProtocolId, LsErc20TokenId>;
+export type LsParachainChainId = Exclude<LsProtocolId, LsLiquifierProtocolId>;
 
 export enum LsToken {
   DOT = 'DOT',
@@ -41,13 +44,13 @@ export enum LsToken {
   POL = 'POL',
 }
 
-export type LsErc20Token =
+export type LsLiquifierProtocolToken =
   | LsToken.LINK
   | LsToken.GRT
   | LsToken.LPT
   | LsToken.POL;
 
-export type LsParachainToken = Exclude<LsToken, LsErc20Token>;
+export type LsParachainToken = Exclude<LsToken, LsLiquifierProtocolToken>;
 
 type ProtocolDefCommon = {
   name: string;
@@ -57,35 +60,45 @@ type ProtocolDefCommon = {
   chainIconFileName: string;
 };
 
-export interface LsParachainChainDef extends ProtocolDefCommon {
-  type: 'parachain';
+export enum LsNetworkId {
+  TANGLE_RESTAKING_PARACHAIN,
+  ETHEREUM_MAINNET_LIQUIFIER,
+}
+
+export interface LsParachainChainDef<T extends ProtocolEntity = ProtocolEntity>
+  extends ProtocolDefCommon {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN;
   id: LsParachainChainId;
   name: string;
   token: LsParachainToken;
   currency: ParachainCurrency;
   rpcEndpoint: string;
+  ss58Prefix: number;
+  adapter: LsNetworkEntityAdapter<T>;
 }
 
-export interface LsErc20TokenDef extends ProtocolDefCommon {
-  type: 'erc20';
-  id: LsErc20TokenId;
-  token: LsErc20Token;
-  address: HexString;
-  liquifierAdapterAddress: HexString;
-  liquifierTgTokenAddress: HexString;
+export interface LsLiquifierProtocolDef extends ProtocolDefCommon {
+  networkId: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER;
+  id: LsLiquifierProtocolId;
+  token: LsLiquifierProtocolToken;
+  erc20TokenAddress: HexString;
+  liquifierContractAddress: HexString;
+  tgTokenContractAddress: HexString;
+  unlocksContractAddress: HexString;
 }
 
-export type LsProtocolDef = LsParachainChainDef | LsErc20TokenDef;
+export type LsProtocolDef = LsParachainChainDef | LsLiquifierProtocolDef;
 
 export type LsCardSearchParams = {
   amount: BN;
-  chainId: LsProtocolId;
+  protocolId: LsProtocolId;
 };
 
 export enum LsSearchParamKey {
   AMOUNT = 'amount',
   PROTOCOL_ID = 'protocol',
   ACTION = 'action',
+  NETWORK_ID = 'network',
 }
 
 // TODO: These should be moved/managed in libs/webb-ui-components/src/constants/networks.ts and not here. This is just a temporary solution.
@@ -112,7 +125,15 @@ export type LsParachainCurrencyKey =
 
 export type LsParachainTimeUnit = TanglePrimitivesTimeUnit['type'];
 
-export type LsSimpleParachainTimeUnit = {
+export type LsParachainSimpleTimeUnit = {
   value: number;
   unit: LsParachainTimeUnit;
 };
+
+export type LsNetwork = {
+  type: LsNetworkId;
+  networkName: string;
+  chainIconFileName: string;
+  defaultProtocolId: LsProtocolId;
+  protocols: LsProtocolDef[];
+};
diff --git a/apps/tangle-dapp/containers/ApiDevStatsContainer/index.ts b/apps/tangle-dapp/containers/ApiDevStatsContainer/index.ts
deleted file mode 100644
index c5ce29e044..0000000000
--- a/apps/tangle-dapp/containers/ApiDevStatsContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ApiDevStatsContainer';
diff --git a/apps/tangle-dapp/containers/ApiDevStatsContainer/ApiDevStatsContainer.tsx b/apps/tangle-dapp/containers/DebugMetricsContainer/DebugMetrics.tsx
similarity index 75%
rename from apps/tangle-dapp/containers/ApiDevStatsContainer/ApiDevStatsContainer.tsx
rename to apps/tangle-dapp/containers/DebugMetricsContainer/DebugMetrics.tsx
index 17a8a4538d..47b73ac9af 100644
--- a/apps/tangle-dapp/containers/ApiDevStatsContainer/ApiDevStatsContainer.tsx
+++ b/apps/tangle-dapp/containers/DebugMetricsContainer/DebugMetrics.tsx
@@ -4,6 +4,7 @@ import { Expand } from '@webb-tools/icons';
 import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useEffect, useState } from 'react';
 
+import useDebugMetricsStore from '../../context/useDebugMetricsStore';
 import useNetworkStore from '../../context/useNetworkStore';
 import usePromise from '../../hooks/usePromise';
 import { getApiPromise, getApiRx } from '../../utils/polkadot';
@@ -19,9 +20,10 @@ function formatBytes(bytes: number): string {
   return Math.round(bytes * MEGABYTE_FACTOR * 100) / 100 + 'mb';
 }
 
-const ApiDevStats: FC = () => {
+const DebugMetrics: FC = () => {
   const [isCollapsed, setIsCollapsed] = useState(true);
   const { rpcEndpoint } = useNetworkStore();
+  const { requestCount, subscriptionCount } = useDebugMetricsStore();
 
   const { result: api } = usePromise(
     useCallback(() => getApiPromise(rpcEndpoint), [rpcEndpoint]),
@@ -37,11 +39,9 @@ const ApiDevStats: FC = () => {
   const [tick, setTick] = useState(0);
 
   const totalRequests =
-    (api?.stats?.total.requests ?? 0) + (apiRx?.stats?.total.requests ?? 0);
-
-  const totalSubscriptions =
-    (api?.stats?.total.subscriptions ?? 0) +
-    (apiRx?.stats?.total.subscriptions ?? 0);
+    (api?.stats?.total.requests ?? 0) +
+    (apiRx?.stats?.total.requests ?? 0) +
+    requestCount;
 
   const totalBytesReceived =
     (api?.stats?.total.bytesRecv ?? 0) + (apiRx?.stats?.total.bytesRecv ?? 0);
@@ -52,12 +52,10 @@ const ApiDevStats: FC = () => {
   const totalErrors =
     (api?.stats?.total.errors ?? 0) + (apiRx?.stats?.total.errors ?? 0);
 
-  const totalActiveRequests =
-    (api?.stats?.active.requests ?? 0) + (apiRx?.stats?.active.requests ?? 0);
-
   const totalActiveSubscriptions =
     (api?.stats?.active.subscriptions ?? 0) +
-    (apiRx?.stats?.active.subscriptions ?? 0);
+    (apiRx?.stats?.active.subscriptions ?? 0) +
+    subscriptionCount;
 
   // Manually trigger a re-render every second, since the stats
   // are not automatically updated.
@@ -80,33 +78,13 @@ const ApiDevStats: FC = () => {
 
       <Metric
         title="Subscriptions"
-        value={totalSubscriptions}
-        warnAt={100}
-        isApiLoading={isApiLoading}
-      />
-
-      <Metric
-        title="Requests (active)"
-        value={totalActiveRequests}
-        isApiLoading={isApiLoading}
-      />
-
-      <Metric
-        title="Subscriptions (active)"
-        value={totalActiveSubscriptions}
-        warnAt={100}
-        isApiLoading={isApiLoading}
-      />
-
-      <Metric
-        title="Data sent"
-        value={formatBytes(totalBytesSent)}
+        value={`${totalActiveSubscriptions} active`}
         isApiLoading={isApiLoading}
       />
 
       <Metric
-        title="Data received"
-        value={formatBytes(totalBytesReceived)}
+        title="Data usage"
+        value={`${formatBytes(totalBytesReceived)} in, ${formatBytes(totalBytesSent)} out`}
         isApiLoading={isApiLoading}
       />
 
@@ -148,7 +126,7 @@ const Metric: FC<{
       : '';
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-max whitespace-nowrap">
       <Typography variant="body1" className="whitespace-nowrap">
         {title}
       </Typography>
@@ -156,7 +134,7 @@ const Metric: FC<{
       {isApiLoading ? (
         <SkeletonLoader />
       ) : (
-        <Typography variant="h4" className={warnAfterClassName}>
+        <Typography variant="h5" className={warnAfterClassName}>
           {value}
         </Typography>
       )}
@@ -164,4 +142,4 @@ const Metric: FC<{
   );
 };
 
-export default ApiDevStats;
+export default DebugMetrics;
diff --git a/apps/tangle-dapp/containers/DebugMetricsContainer/index.ts b/apps/tangle-dapp/containers/DebugMetricsContainer/index.ts
new file mode 100644
index 0000000000..8405ad051a
--- /dev/null
+++ b/apps/tangle-dapp/containers/DebugMetricsContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './DebugMetrics';
diff --git a/apps/tangle-dapp/containers/Layout/Layout.tsx b/apps/tangle-dapp/containers/Layout/Layout.tsx
index 067143e941..38abe88bdc 100644
--- a/apps/tangle-dapp/containers/Layout/Layout.tsx
+++ b/apps/tangle-dapp/containers/Layout/Layout.tsx
@@ -18,7 +18,7 @@ import {
   SidebarMenu,
 } from '../../components';
 import { IS_PRODUCTION_ENV } from '../../constants/env';
-import ApiDevStatsContainer from '../ApiDevStatsContainer';
+import ApiDevStatsContainer from '../DebugMetricsContainer';
 import WalletAndChainContainer from '../WalletAndChainContainer/WalletAndChainContainer';
 import { WalletModalContainer } from '../WalletModalContainer';
 import FeedbackBanner from './FeedbackBanner';
diff --git a/apps/tangle-dapp/context/useDebugMetricsStore.ts b/apps/tangle-dapp/context/useDebugMetricsStore.ts
new file mode 100644
index 0000000000..408f07d2cf
--- /dev/null
+++ b/apps/tangle-dapp/context/useDebugMetricsStore.ts
@@ -0,0 +1,22 @@
+'use client';
+
+import { create } from 'zustand';
+
+const useDebugMetricsStore = create<{
+  requestCount: number;
+  subscriptionCount: number;
+  incrementRequestCount: () => void;
+  incrementSubscriptionCount: () => void;
+  decrementSubscriptionCount: () => void;
+}>((set) => ({
+  requestCount: 0,
+  subscriptionCount: 0,
+  incrementRequestCount: () =>
+    set((state) => ({ requestCount: state.requestCount + 1 })),
+  incrementSubscriptionCount: () =>
+    set((state) => ({ subscriptionCount: state.subscriptionCount + 1 })),
+  decrementSubscriptionCount: () =>
+    set((state) => ({ subscriptionCount: state.subscriptionCount - 1 })),
+}));
+
+export default useDebugMetricsStore;
diff --git a/apps/tangle-dapp/context/useSearchParamsStore.ts b/apps/tangle-dapp/context/useSearchParamsStore.ts
index 10c1bbeb92..c23e7953d3 100644
--- a/apps/tangle-dapp/context/useSearchParamsStore.ts
+++ b/apps/tangle-dapp/context/useSearchParamsStore.ts
@@ -34,6 +34,7 @@ const useSearchParamsStore = () => {
     setBufferSearchParams(routerSearchParams);
   }, [routerSearchParams, setBufferSearchParams]);
 
+  // TODO: Sort params by name so that after each update, the URL search params don't "flicker" due to their positions changing.
   const updateSearchParam = useCallback(
     (key: string, value: string | undefined) => {
       if (bufferSearchParams === null) {
diff --git a/apps/tangle-dapp/data/liquidStaking/adapter.ts b/apps/tangle-dapp/data/liquidStaking/adapter.ts
new file mode 100644
index 0000000000..c95d39f5fa
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapter.ts
@@ -0,0 +1,39 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { PromiseOrT } from '@webb-tools/abstract-api-provider';
+import { MutableRefObject } from 'react';
+
+import { AstarDapp } from './adapters/astar';
+import { MoonbeamCollator } from './adapters/moonbeam';
+import { PhalaVaultOrStakePool } from './adapters/phala';
+import { PolkadotValidator } from './adapters/polkadot';
+
+export type ProtocolEntity =
+  | PolkadotValidator
+  | PhalaVaultOrStakePool
+  | AstarDapp
+  | MoonbeamCollator;
+
+export enum NetworkEntityType {
+  POLKADOT_VALIDATOR,
+  PHALA_VAULT_OR_STAKE_POOL,
+}
+
+export type FetchProtocolEntitiesFn<T extends ProtocolEntity> = (
+  rpcEndpoint: string,
+) => PromiseOrT<T[]>;
+
+// Note that it's acceptable to use `any` for the return type here,
+// since it won't affect our type safety of our logic, only TanStack's.
+// In fact, they also use `any` internally, likely because of the complexity
+// of the different possible column types.
+export type GetTableColumnsFn<T extends ProtocolEntity> = (
+  toggleSortSelectionHandlerRef: MutableRefObject<
+    ((desc?: boolean | undefined, isMulti?: boolean | undefined) => void) | null
+  >,
+) => ColumnDef<T, any>[];
+
+export type LsNetworkEntityAdapter<T extends ProtocolEntity = ProtocolEntity> =
+  {
+    fetchProtocolEntities: FetchProtocolEntitiesFn<T>;
+    getTableColumns: GetTableColumnsFn<T>;
+  };
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/astar.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/astar.tsx
new file mode 100644
index 0000000000..f2cc9c07d3
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/astar.tsx
@@ -0,0 +1,199 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { createColumnHelper, SortingFnOption } from '@tanstack/react-table';
+import {
+  Avatar,
+  CopyWithTooltip,
+  shortenString,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+
+import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton';
+import {
+  LsNetworkId,
+  LsParachainChainDef,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { LiquidStakingItem } from '../../../types/liquidStaking';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+import formatBn from '../../../utils/formatBn';
+import { GetTableColumnsFn } from '../adapter';
+import { sortSelected, sortValueStaked } from '../columnSorting';
+import { fetchMappedDappsTotalValueStaked } from '../fetchHelpers';
+import RadioInput from '../useLsValidatorSelectionTableColumns';
+
+const DECIMALS = 18;
+
+export type AstarDapp = {
+  id: string;
+  name: string;
+  // TODO: Is this a Substrate address? If so, use `SubstrateAddress` type.
+  contractAddress: string;
+  identity?: string;
+  totalValueStaked: BN;
+};
+
+const fetchDapps = async (rpcEndpoint: string): Promise<AstarDapp[]> => {
+  const [dapps, mappedTotalValueStaked, stakingDappsResponse] =
+    await Promise.all([
+      fetchDapps(rpcEndpoint),
+      fetchMappedDappsTotalValueStaked(rpcEndpoint),
+      fetch('https://api.astar.network/api/v1/astar/dapps-staking/dapps'),
+    ]);
+
+  if (!stakingDappsResponse.ok) {
+    throw new Error('Failed to fetch staking dapps');
+  }
+
+  // TODO: This is typed as 'any'.
+  const dappInfosArray = await stakingDappsResponse.json();
+
+  const dappInfosMap = new Map(
+    // TODO: Avoid using `any`.
+    dappInfosArray.map((dappInfo: any) => [dappInfo.address, dappInfo]),
+  );
+
+  return dapps.map((dapp) => {
+    const totalValueStaked = mappedTotalValueStaked.get(dapp.id);
+
+    // TODO: Avoid casting.
+    const dappInfo = dappInfosMap.get(dapp.contractAddress) as
+      | {
+          name?: string;
+          contractType?: string;
+        }
+      | undefined;
+
+    return {
+      id: dapp.id,
+      contractAddress: dapp.contractAddress,
+      name:
+        dappInfo !== undefined
+          ? dappInfo.name || dapp.contractAddress
+          : dapp.contractAddress,
+      dappContractType:
+        dappInfo !== undefined ? dappInfo.contractType || '' : '',
+      commission: BN_ZERO,
+      totalValueStaked: totalValueStaked ?? BN_ZERO,
+      itemType: LiquidStakingItem.DAPP,
+    };
+  });
+};
+
+const getTableColumns: GetTableColumnsFn<AstarDapp> = (
+  toggleSortSelectionHandlerRef,
+) => {
+  const dappColumnHelper = createColumnHelper<AstarDapp>();
+
+  return [
+    dappColumnHelper.accessor('contractAddress', {
+      header: ({ header }) => {
+        toggleSortSelectionHandlerRef.current = header.column.toggleSorting;
+        return (
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            dApp
+          </Typography>
+        );
+      },
+      cell: (props) => {
+        const address = props.getValue();
+        const isEthAddress = address.startsWith('0x');
+        const dappName = props.row.original.name;
+
+        return (
+          <div className="flex items-center gap-2">
+            <RadioInput
+              checked={props.row.getIsSelected()}
+              onChange={props.row.getToggleSelectedHandler()}
+            />
+
+            <div className="flex items-center space-x-1">
+              <Avatar
+                sourceVariant="address"
+                value={address}
+                theme={isEthAddress ? 'ethereum' : 'substrate'}
+              />
+
+              <Typography
+                variant="body2"
+                fw="normal"
+                className="truncate text-mono-200 dark:text-mono-0"
+              >
+                {dappName === address ? shortenString(address, 8) : dappName}
+              </Typography>
+
+              <CopyWithTooltip
+                textToCopy={address}
+                isButton={false}
+                className="cursor-pointer"
+              />
+            </div>
+          </div>
+        );
+      },
+      sortingFn: sortSelected as SortingFnOption<AstarDapp>,
+    }),
+    dappColumnHelper.accessor('totalValueStaked', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Total Staked
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.ASTAR}`}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortValueStaked,
+    }),
+    dappColumnHelper.display({
+      id: 'href',
+      header: () => <span></span>,
+      cell: (props) => {
+        const href = `https://portal.astar.network/astar/dapp-staking/dapp?dapp=${props.row.original.contractAddress}`;
+
+        return <StakingItemExternalLinkButton href={href} />;
+      },
+    }),
+  ];
+};
+
+const ASTAR: LsParachainChainDef<AstarDapp> = {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  id: LsProtocolId.ASTAR,
+  name: 'Astar',
+  token: LsToken.ASTAR,
+  chainIconFileName: 'astar',
+  // TODO: No currency entry for ASTAR in the Tangle Primitives?
+  currency: 'Dot',
+  decimals: DECIMALS,
+  rpcEndpoint: 'wss://astar.api.onfinality.io/public-ws',
+  timeUnit: CrossChainTimeUnit.ASTAR_ERA,
+  unstakingPeriod: 7,
+  ss58Prefix: 5,
+  adapter: {
+    fetchProtocolEntities: fetchDapps,
+    getTableColumns,
+  },
+} as const satisfies LsParachainChainDef<AstarDapp>;
+
+export default ASTAR;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/chainlink.ts b/apps/tangle-dapp/data/liquidStaking/adapters/chainlink.ts
new file mode 100644
index 0000000000..5da8814f9e
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/chainlink.ts
@@ -0,0 +1,34 @@
+import { IS_PRODUCTION_ENV } from '../../../constants/env';
+import { SEPOLIA_TESTNET_CONTRACTS } from '../../../constants/liquidStaking/devConstants';
+import {
+  LsLiquifierProtocolDef,
+  LsNetworkId,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+
+const CHAINLINK = {
+  networkId: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER,
+  id: LsProtocolId.CHAINLINK,
+  name: 'Chainlink',
+  chainIconFileName: 'chainlink',
+  token: LsToken.LINK,
+  decimals: 18,
+  erc20TokenAddress: IS_PRODUCTION_ENV
+    ? '0x514910771AF9Ca656af840dff83E8264EcF986CA'
+    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
+  liquifierContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
+  tgTokenContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
+  unlocksContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.UNLOCKS,
+  timeUnit: CrossChainTimeUnit.DAY,
+  unstakingPeriod: 7,
+} as const satisfies LsLiquifierProtocolDef;
+
+export default CHAINLINK;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/livepeer.ts b/apps/tangle-dapp/data/liquidStaking/adapters/livepeer.ts
new file mode 100644
index 0000000000..4797c86527
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/livepeer.ts
@@ -0,0 +1,34 @@
+import { IS_PRODUCTION_ENV } from '../../../constants/env';
+import { SEPOLIA_TESTNET_CONTRACTS } from '../../../constants/liquidStaking/devConstants';
+import {
+  LsLiquifierProtocolDef,
+  LsNetworkId,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+
+const LIVEPEER = {
+  networkId: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER,
+  id: LsProtocolId.LIVEPEER,
+  name: 'Livepeer',
+  chainIconFileName: 'livepeer',
+  token: LsToken.LPT,
+  decimals: 18,
+  erc20TokenAddress: IS_PRODUCTION_ENV
+    ? '0x58b6A8A3302369DAEc383334672404Ee733aB239'
+    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
+  liquifierContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
+  tgTokenContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
+  unlocksContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.UNLOCKS,
+  timeUnit: CrossChainTimeUnit.LIVEPEER_ROUND,
+  unstakingPeriod: 7,
+} as const satisfies LsLiquifierProtocolDef;
+
+export default LIVEPEER;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/manta.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/manta.tsx
new file mode 100644
index 0000000000..d36f43fce7
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/manta.tsx
@@ -0,0 +1,227 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { createColumnHelper, SortingFnOption } from '@tanstack/react-table';
+import {
+  Avatar,
+  CheckBox,
+  CopyWithTooltip,
+  shortenString,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+
+import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton';
+import {
+  LsNetworkId,
+  LsParachainChainDef,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { LiquidStakingItem } from '../../../types/liquidStaking';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+import formatBn from '../../../utils/formatBn';
+import { getApiPromise } from '../../../utils/polkadot';
+import { FetchProtocolEntitiesFn, GetTableColumnsFn } from '../adapter';
+import {
+  sortDelegationCount,
+  sortSelected,
+  sortValueStaked,
+} from '../columnSorting';
+import {
+  fetchMappedCollatorInfo,
+  fetchMappedIdentityNames,
+} from '../fetchHelpers';
+
+const DECIMALS = 18;
+
+export type MantaCollator = {
+  // TODO: Is `collatorAddress` a Substrate address? If so, use `SubstrateAddress` type.
+  address: string;
+  identity: string;
+  delegationCount: number;
+  totalValueStaked: BN;
+};
+
+const fetchAllCollators = async (rpcEndpoint: string) => {
+  const api = await getApiPromise(rpcEndpoint);
+
+  if (!api.query.parachainStaking) {
+    throw new Error('parachainStaking pallet is not available in the runtime');
+  }
+
+  const selectedCollators =
+    await api.query.parachainStaking.selectedCandidates();
+
+  return selectedCollators.map((collator) => collator.toString());
+};
+
+const fetchCollators: FetchProtocolEntitiesFn<MantaCollator> = async (
+  rpcEndpoint,
+) => {
+  const [collators, mappedIdentityNames, mappedCollatorInfo] =
+    await Promise.all([
+      fetchAllCollators(rpcEndpoint),
+      fetchMappedIdentityNames(rpcEndpoint),
+      fetchMappedCollatorInfo(rpcEndpoint),
+    ]);
+
+  return collators.map((collator) => {
+    const identityName = mappedIdentityNames.get(collator);
+    const collatorInfo = mappedCollatorInfo.get(collator);
+
+    return {
+      id: collator,
+      address: collator,
+      identity: identityName || collator,
+      delegationCount: collatorInfo?.delegationCount ?? 0,
+      totalValueStaked: collatorInfo?.totalStaked ?? BN_ZERO,
+      itemType: LiquidStakingItem.COLLATOR,
+    };
+  });
+};
+
+const getTableColumns: GetTableColumnsFn<MantaCollator> = (
+  toggleSortSelectionHandlerRef,
+) => {
+  const collatorColumnHelper = createColumnHelper<MantaCollator>();
+
+  return [
+    collatorColumnHelper.accessor('address', {
+      header: ({ header }) => {
+        toggleSortSelectionHandlerRef.current = header.column.toggleSorting;
+        return (
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Collator
+          </Typography>
+        );
+      },
+      cell: (props) => {
+        const address = props.getValue();
+        const isEthAddress = address.startsWith('0x');
+        const identity = props.row.original.identity ?? address;
+
+        return (
+          <div className="flex items-center gap-2">
+            <CheckBox
+              wrapperClassName="!block !min-h-auto cursor-pointer"
+              className="cursor-pointer"
+              isChecked={props.row.getIsSelected()}
+              onChange={props.row.getToggleSelectedHandler()}
+            />
+
+            <div className="flex items-center space-x-1">
+              <Avatar
+                sourceVariant="address"
+                value={address}
+                theme={isEthAddress ? 'ethereum' : 'substrate'}
+              />
+
+              <Typography
+                variant="body2"
+                fw="normal"
+                className="truncate text-mono-200 dark:text-mono-0"
+              >
+                {identity === address ? shortenString(address, 8) : identity}
+              </Typography>
+
+              <CopyWithTooltip
+                textToCopy={address}
+                isButton={false}
+                className="cursor-pointer"
+              />
+            </div>
+          </div>
+        );
+      },
+      sortingFn: sortSelected as SortingFnOption<MantaCollator>,
+    }),
+    collatorColumnHelper.accessor('totalValueStaked', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Total Staked
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.GLMR}`}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortValueStaked,
+    }),
+    collatorColumnHelper.accessor('delegationCount', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Delegations
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {props.getValue()}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortDelegationCount as SortingFnOption<MantaCollator>,
+    }),
+    collatorColumnHelper.display({
+      id: 'identity',
+      header: () => <span></span>,
+      cell: () => {
+        // Note that Moonbeam collators don't have a direct link on
+        // stakeglmr.com.
+        return <StakingItemExternalLinkButton href="https://stakeglmr.com/" />;
+      },
+    }),
+  ];
+};
+
+const MANTA: LsParachainChainDef<MantaCollator> = {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  id: LsProtocolId.MANTA,
+  name: 'Manta',
+  token: LsToken.MANTA,
+  chainIconFileName: 'manta',
+  // TODO: No currency entry for ASTAR in the Tangle Primitives?
+  currency: 'Dot',
+  decimals: 18,
+  rpcEndpoint: 'wss://ws.manta.systems',
+  timeUnit: CrossChainTimeUnit.DAY,
+  unstakingPeriod: 7,
+  ss58Prefix: 77,
+  adapter: {
+    fetchProtocolEntities: fetchCollators,
+    getTableColumns,
+  },
+} as const satisfies LsParachainChainDef<MantaCollator>;
+
+export default MANTA;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/moonbeam.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/moonbeam.tsx
new file mode 100644
index 0000000000..0c580b84d5
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/moonbeam.tsx
@@ -0,0 +1,227 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { createColumnHelper, SortingFnOption } from '@tanstack/react-table';
+import {
+  Avatar,
+  CheckBox,
+  CopyWithTooltip,
+  shortenString,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+
+import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton';
+import {
+  LsNetworkId,
+  LsParachainChainDef,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { LiquidStakingItem } from '../../../types/liquidStaking';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+import formatBn from '../../../utils/formatBn';
+import { getApiPromise } from '../../../utils/polkadot';
+import { FetchProtocolEntitiesFn, GetTableColumnsFn } from '../adapter';
+import {
+  sortDelegationCount,
+  sortSelected,
+  sortValueStaked,
+} from '../columnSorting';
+import {
+  fetchMappedCollatorInfo,
+  fetchMappedIdentityNames,
+} from '../fetchHelpers';
+
+const DECIMALS = 18;
+
+export type MoonbeamCollator = {
+  // TODO: Is `collatorAddress` a Substrate address? If so, use `SubstrateAddress` type.
+  address: string;
+  identity: string;
+  delegationCount: number;
+  totalValueStaked: BN;
+};
+
+const fetchAllCollators = async (rpcEndpoint: string) => {
+  const api = await getApiPromise(rpcEndpoint);
+
+  if (!api.query.parachainStaking) {
+    throw new Error('parachainStaking pallet is not available in the runtime');
+  }
+
+  const selectedCollators =
+    await api.query.parachainStaking.selectedCandidates();
+
+  return selectedCollators.map((collator) => collator.toString());
+};
+
+const fetchCollators: FetchProtocolEntitiesFn<MoonbeamCollator> = async (
+  rpcEndpoint,
+) => {
+  const [collators, mappedIdentityNames, mappedCollatorInfo] =
+    await Promise.all([
+      fetchAllCollators(rpcEndpoint),
+      fetchMappedIdentityNames(rpcEndpoint),
+      fetchMappedCollatorInfo(rpcEndpoint),
+    ]);
+
+  return collators.map((collator) => {
+    const identityName = mappedIdentityNames.get(collator);
+    const collatorInfo = mappedCollatorInfo.get(collator);
+
+    return {
+      id: collator,
+      address: collator,
+      identity: identityName || collator,
+      delegationCount: collatorInfo?.delegationCount ?? 0,
+      totalValueStaked: collatorInfo?.totalStaked ?? BN_ZERO,
+      itemType: LiquidStakingItem.COLLATOR,
+    };
+  });
+};
+
+const getTableColumns: GetTableColumnsFn<MoonbeamCollator> = (
+  toggleSortSelectionHandlerRef,
+) => {
+  const collatorColumnHelper = createColumnHelper<MoonbeamCollator>();
+
+  return [
+    collatorColumnHelper.accessor('address', {
+      header: ({ header }) => {
+        toggleSortSelectionHandlerRef.current = header.column.toggleSorting;
+        return (
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Collator
+          </Typography>
+        );
+      },
+      cell: (props) => {
+        const address = props.getValue();
+        const isEthAddress = address.startsWith('0x');
+        const identity = props.row.original.identity ?? address;
+
+        return (
+          <div className="flex items-center gap-2">
+            <CheckBox
+              wrapperClassName="!block !min-h-auto cursor-pointer"
+              className="cursor-pointer"
+              isChecked={props.row.getIsSelected()}
+              onChange={props.row.getToggleSelectedHandler()}
+            />
+
+            <div className="flex items-center space-x-1">
+              <Avatar
+                sourceVariant="address"
+                value={address}
+                theme={isEthAddress ? 'ethereum' : 'substrate'}
+              />
+
+              <Typography
+                variant="body2"
+                fw="normal"
+                className="truncate text-mono-200 dark:text-mono-0"
+              >
+                {identity === address ? shortenString(address, 8) : identity}
+              </Typography>
+
+              <CopyWithTooltip
+                textToCopy={address}
+                isButton={false}
+                className="cursor-pointer"
+              />
+            </div>
+          </div>
+        );
+      },
+      sortingFn: sortSelected as SortingFnOption<MoonbeamCollator>,
+    }),
+    collatorColumnHelper.accessor('totalValueStaked', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Total Staked
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.GLMR}`}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortValueStaked,
+    }),
+    collatorColumnHelper.accessor('delegationCount', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Delegations
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {props.getValue()}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortDelegationCount as SortingFnOption<MoonbeamCollator>,
+    }),
+    collatorColumnHelper.display({
+      id: 'identity',
+      header: () => <span></span>,
+      cell: () => {
+        // Note that Moonbeam collators don't have a direct link on
+        // stakeglmr.com.
+        return <StakingItemExternalLinkButton href="https://stakeglmr.com/" />;
+      },
+    }),
+  ];
+};
+
+const MOONBEAM: LsParachainChainDef<MoonbeamCollator> = {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  id: LsProtocolId.MOONBEAM,
+  name: 'Moonbeam',
+  token: LsToken.GLMR,
+  chainIconFileName: 'moonbeam',
+  // TODO: No currency entry for GLMR in the Tangle Primitives?
+  currency: 'Dot',
+  decimals: DECIMALS,
+  rpcEndpoint: 'wss://moonbeam.api.onfinality.io/public-ws',
+  timeUnit: CrossChainTimeUnit.MOONBEAM_ROUND,
+  unstakingPeriod: 28,
+  ss58Prefix: 1284,
+  adapter: {
+    fetchProtocolEntities: fetchCollators,
+    getTableColumns,
+  },
+} as const satisfies LsParachainChainDef<MoonbeamCollator>;
+
+export default MOONBEAM;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/phala.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/phala.tsx
new file mode 100644
index 0000000000..e48a1142b5
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/phala.tsx
@@ -0,0 +1,242 @@
+import { BN } from '@polkadot/util';
+import {
+  createColumnHelper,
+  Row,
+  SortingFnOption,
+} from '@tanstack/react-table';
+import {
+  Avatar,
+  Chip,
+  CopyWithTooltip,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+
+import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton';
+import {
+  LsNetworkId,
+  LsParachainChainDef,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { LiquidStakingItem } from '../../../types/liquidStaking';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+import formatBn from '../../../utils/formatBn';
+import { FetchProtocolEntitiesFn, GetTableColumnsFn } from '../adapter';
+import {
+  sortCommission,
+  sortSelected,
+  sortValueStaked,
+} from '../columnSorting';
+import { fetchVaultsAndStakePools } from '../fetchHelpers';
+import RadioInput from '../useLsValidatorSelectionTableColumns';
+
+const DECIMALS = 18;
+
+export type PhalaVaultOrStakePool = {
+  // TODO: Is `id` or `accountId` a Substrate address? If so, use `SubstrateAddress` type.
+  id: string;
+  accountId: string;
+  commission: BN;
+  totalValueStaked: BN;
+  type: 'vault' | 'stake-pool';
+};
+
+const fetchVaultOrStakePools: FetchProtocolEntitiesFn<
+  PhalaVaultOrStakePool
+> = async (rpcEndpoint) => {
+  const vaultsAndStakePools = await fetchVaultsAndStakePools(rpcEndpoint);
+
+  return vaultsAndStakePools.map((entity) => {
+    const type = entity.type === 'vault' ? 'vault' : 'stake-pool';
+
+    return {
+      id: entity.id,
+      accountId: entity.accountId,
+      commission: entity.commission,
+      totalValueStaked: entity.totalValueStaked,
+      type,
+      itemType: LiquidStakingItem.VAULT_OR_STAKE_POOL,
+    };
+  });
+};
+
+const getTableColumns: GetTableColumnsFn<PhalaVaultOrStakePool> = (
+  toggleSortSelectionHandlerRef,
+) => {
+  const vaultOrStakePoolColumnHelper =
+    createColumnHelper<PhalaVaultOrStakePool>();
+
+  // Uses localeCompare for string comparison to ensure
+  // proper alphabetical order.
+  const sortType = <T extends { type: string }>(rowA: Row<T>, rowB: Row<T>) => {
+    const rowAType = rowA.original.type;
+    const rowBType = rowB.original.type;
+
+    return rowAType.localeCompare(rowBType);
+  };
+
+  return [
+    vaultOrStakePoolColumnHelper.accessor('id', {
+      header: ({ header }) => {
+        toggleSortSelectionHandlerRef.current = header.column.toggleSorting;
+        return (
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Vault/Pool ID
+          </Typography>
+        );
+      },
+      cell: (props) => {
+        const id = props.getValue();
+
+        return (
+          <div className="flex items-center gap-2">
+            <RadioInput
+              checked={props.row.getIsSelected()}
+              onChange={props.row.getToggleSelectedHandler()}
+            />
+
+            <div className="flex items-center space-x-1">
+              <Avatar
+                sourceVariant="address"
+                value={props.row.original.accountId}
+                theme="substrate"
+              />
+
+              <Typography
+                variant="body2"
+                fw="normal"
+                className="truncate text-mono-200 dark:text-mono-0"
+              >
+                #{id}
+              </Typography>
+
+              <CopyWithTooltip
+                textToCopy={id}
+                isButton={false}
+                className="cursor-pointer"
+              />
+            </div>
+          </div>
+        );
+      },
+      // TODO: Avoid casting sorting function.
+      sortingFn: sortSelected as SortingFnOption<PhalaVaultOrStakePool>,
+    }),
+    vaultOrStakePoolColumnHelper.accessor('type', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Type
+          </Typography>
+        </div>
+      ),
+      cell: (props) => {
+        const type = props.getValue();
+
+        return (
+          <div className="flex items-center justify-center">
+            <Chip color={type === 'vault' ? 'green' : 'blue'}>{type}</Chip>
+          </div>
+        );
+      },
+      sortingFn: sortType,
+    }),
+    vaultOrStakePoolColumnHelper.accessor('totalValueStaked', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Total Staked
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.PHALA}`}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortValueStaked,
+    }),
+    vaultOrStakePoolColumnHelper.accessor('commission', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Commission
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {(Number(props.getValue().toString()) / 10000).toFixed(2)}%
+          </Typography>
+        </div>
+      ),
+      // TODO: Avoid casting sorting function.
+      sortingFn: sortCommission as SortingFnOption<PhalaVaultOrStakePool>,
+    }),
+    vaultOrStakePoolColumnHelper.display({
+      id: 'href',
+      header: () => <span></span>,
+      cell: (props) => {
+        const href = `https://app.phala.network/phala/${props.row.original.type}/${props.row.original.id}`;
+
+        return <StakingItemExternalLinkButton href={href} />;
+      },
+    }),
+  ];
+};
+
+const PHALA: LsParachainChainDef<PhalaVaultOrStakePool> = {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  id: LsProtocolId.PHALA,
+  name: 'Phala',
+  token: LsToken.PHALA,
+  chainIconFileName: 'phala',
+  currency: 'Pha',
+  decimals: DECIMALS,
+  rpcEndpoint: 'wss://api.phala.network/ws',
+  timeUnit: CrossChainTimeUnit.DAY,
+  unstakingPeriod: 7,
+  ss58Prefix: 30,
+  adapter: {
+    fetchProtocolEntities: fetchVaultOrStakePools,
+    getTableColumns,
+  },
+} as const satisfies LsParachainChainDef<PhalaVaultOrStakePool>;
+
+export default PHALA;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/polkadot.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/polkadot.tsx
new file mode 100644
index 0000000000..2ceb9186dc
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/polkadot.tsx
@@ -0,0 +1,229 @@
+import { BN, BN_ZERO } from '@polkadot/util';
+import { createColumnHelper, SortingFnOption } from '@tanstack/react-table';
+import {
+  Avatar,
+  CheckBox,
+  CopyWithTooltip,
+  shortenString,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+
+import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton';
+import {
+  LsNetworkId,
+  LsParachainChainDef,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { LiquidStakingItem } from '../../../types/liquidStaking';
+import { SubstrateAddress } from '../../../types/utils';
+import assertSubstrateAddress from '../../../utils/assertSubstrateAddress';
+import calculateCommission from '../../../utils/calculateCommission';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+import formatBn from '../../../utils/formatBn';
+import { GetTableColumnsFn } from '../adapter';
+import {
+  sortCommission,
+  sortSelected,
+  sortValueStaked,
+} from '../columnSorting';
+import {
+  fetchChainDecimals,
+  fetchMappedIdentityNames,
+  fetchMappedValidatorsCommission,
+  fetchMappedValidatorsTotalValueStaked,
+  fetchTokenSymbol,
+} from '../fetchHelpers';
+
+const SS58_PREFIX = 0;
+const DECIMALS = 18;
+
+export type PolkadotValidator = {
+  address: SubstrateAddress<typeof SS58_PREFIX>;
+  identity: string;
+  commission: BN;
+  apy?: number;
+  totalValueStaked: BN;
+};
+
+const fetchValidators = async (
+  rpcEndpoint: string,
+): Promise<PolkadotValidator[]> => {
+  const [
+    validators,
+    mappedIdentityNames,
+    mappedTotalValueStaked,
+    mappedCommission,
+  ] = await Promise.all([
+    fetchValidators(rpcEndpoint),
+    fetchMappedIdentityNames(rpcEndpoint),
+    fetchMappedValidatorsTotalValueStaked(rpcEndpoint),
+    fetchMappedValidatorsCommission(rpcEndpoint),
+    fetchChainDecimals(rpcEndpoint),
+    fetchTokenSymbol(rpcEndpoint),
+  ]);
+
+  return validators.map((address) => {
+    const identityName = mappedIdentityNames.get(address.toString());
+    const totalValueStaked = mappedTotalValueStaked.get(address.toString());
+    const commission = mappedCommission.get(address.toString());
+
+    return {
+      id: address.toString(),
+      address: assertSubstrateAddress(address.toString(), SS58_PREFIX),
+      identity: identityName ?? address.toString(),
+      totalValueStaked: totalValueStaked ?? BN_ZERO,
+      apy: 0,
+      commission: commission ?? BN_ZERO,
+      itemType: LiquidStakingItem.VALIDATOR,
+    };
+  });
+};
+
+const getTableColumns: GetTableColumnsFn<PolkadotValidator> = (
+  toggleSortSelectionHandlerRef,
+) => {
+  const validatorColumnHelper = createColumnHelper<PolkadotValidator>();
+
+  return [
+    validatorColumnHelper.accessor('address', {
+      header: ({ header }) => {
+        toggleSortSelectionHandlerRef.current = header.column.toggleSorting;
+        return (
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Validator
+          </Typography>
+        );
+      },
+      cell: (props) => {
+        const address = props.getValue();
+        const identity = props.row.original.identity ?? address;
+
+        return (
+          <div className="flex items-center gap-2">
+            <CheckBox
+              wrapperClassName="!block !min-h-auto cursor-pointer"
+              className="cursor-pointer"
+              isChecked={props.row.getIsSelected()}
+              onChange={props.row.getToggleSelectedHandler()}
+            />
+
+            <div className="flex items-center space-x-1">
+              <Avatar
+                sourceVariant="address"
+                value={address}
+                theme="substrate"
+              />
+
+              <Typography
+                variant="body2"
+                fw="normal"
+                className="truncate text-mono-200 dark:text-mono-0"
+              >
+                {identity === address ? shortenString(address, 8) : identity}
+              </Typography>
+
+              <CopyWithTooltip
+                textToCopy={address}
+                isButton={false}
+                className="cursor-pointer"
+              />
+            </div>
+          </div>
+        );
+      },
+      // TODO: Avoid casting sorting function.
+      sortingFn: sortSelected as SortingFnOption<PolkadotValidator>,
+    }),
+    validatorColumnHelper.accessor('totalValueStaked', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Total Staked
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.DOT}`}
+          </Typography>
+        </div>
+      ),
+      sortingFn: sortValueStaked,
+    }),
+    validatorColumnHelper.accessor('commission', {
+      header: ({ header }) => (
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={header.column.getToggleSortingHandler()}
+        >
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-mono-120 dark:text-mono-120"
+          >
+            Commission
+          </Typography>
+        </div>
+      ),
+      cell: (props) => (
+        <div className="flex items-center justify-center">
+          <Typography
+            variant="body2"
+            fw="normal"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {calculateCommission(props.getValue()).toFixed(2) + '%'}
+          </Typography>
+        </div>
+      ),
+      // TODO: Avoid casting sorting function.
+      sortingFn: sortCommission as SortingFnOption<PolkadotValidator>,
+    }),
+    validatorColumnHelper.display({
+      id: 'href',
+      header: () => <span></span>,
+      cell: (props) => {
+        const href = `https://polkadot.subscan.io/account/${props.getValue()}`;
+
+        return <StakingItemExternalLinkButton href={href} />;
+      },
+    }),
+  ];
+};
+
+const POLKADOT = {
+  networkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  id: LsProtocolId.POLKADOT,
+  name: 'Polkadot',
+  token: LsToken.DOT,
+  chainIconFileName: 'polkadot',
+  currency: 'Dot',
+  decimals: DECIMALS,
+  rpcEndpoint: 'wss://polkadot-rpc.dwellir.com',
+  timeUnit: CrossChainTimeUnit.POLKADOT_ERA,
+  unstakingPeriod: 28,
+  ss58Prefix: 0,
+  adapter: {
+    fetchProtocolEntities: fetchValidators,
+    getTableColumns,
+  },
+} as const satisfies LsParachainChainDef<PolkadotValidator>;
+
+export default POLKADOT;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/polygon.ts b/apps/tangle-dapp/data/liquidStaking/adapters/polygon.ts
new file mode 100644
index 0000000000..574442fa66
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/polygon.ts
@@ -0,0 +1,34 @@
+import { IS_PRODUCTION_ENV } from '../../../constants/env';
+import { SEPOLIA_TESTNET_CONTRACTS } from '../../../constants/liquidStaking/devConstants';
+import {
+  LsLiquifierProtocolDef,
+  LsNetworkId,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+
+const POLYGON = {
+  networkId: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER,
+  id: LsProtocolId.POLYGON,
+  name: 'Polygon',
+  chainIconFileName: 'polygon',
+  token: LsToken.POL,
+  decimals: 18,
+  erc20TokenAddress: IS_PRODUCTION_ENV
+    ? '0x0D500B1d8E8eF31E21C99d1Db9A6444d3ADf1270'
+    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
+  liquifierContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
+  tgTokenContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
+  unlocksContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.UNLOCKS,
+  timeUnit: CrossChainTimeUnit.POLYGON_CHECKPOINT,
+  unstakingPeriod: 82,
+} as const satisfies LsLiquifierProtocolDef;
+
+export default POLYGON;
diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/theGraph.ts b/apps/tangle-dapp/data/liquidStaking/adapters/theGraph.ts
new file mode 100644
index 0000000000..b5a126efec
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/adapters/theGraph.ts
@@ -0,0 +1,34 @@
+import { IS_PRODUCTION_ENV } from '../../../constants/env';
+import { SEPOLIA_TESTNET_CONTRACTS } from '../../../constants/liquidStaking/devConstants';
+import {
+  LsLiquifierProtocolDef,
+  LsNetworkId,
+  LsProtocolId,
+  LsToken,
+} from '../../../constants/liquidStaking/types';
+import { CrossChainTimeUnit } from '../../../utils/CrossChainTime';
+
+const THE_GRAPH = {
+  networkId: LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER,
+  id: LsProtocolId.THE_GRAPH,
+  name: 'The Graph',
+  chainIconFileName: 'the-graph',
+  token: LsToken.GRT,
+  decimals: 18,
+  erc20TokenAddress: IS_PRODUCTION_ENV
+    ? '0xc944E90C64B2c07662A292be6244BDf05Cda44a7'
+    : SEPOLIA_TESTNET_CONTRACTS.ERC20,
+  liquifierContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.LIQUIFIER,
+  tgTokenContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.TG_TOKEN,
+  unlocksContractAddress: IS_PRODUCTION_ENV
+    ? '0x'
+    : SEPOLIA_TESTNET_CONTRACTS.UNLOCKS,
+  timeUnit: CrossChainTimeUnit.DAY,
+  unstakingPeriod: 28,
+} as const satisfies LsLiquifierProtocolDef;
+
+export default THE_GRAPH;
diff --git a/apps/tangle-dapp/data/liquidStaking/columnSorting.ts b/apps/tangle-dapp/data/liquidStaking/columnSorting.ts
new file mode 100644
index 0000000000..3dc9401e28
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/columnSorting.ts
@@ -0,0 +1,76 @@
+/**
+ * Function to sort rows based on their selected status.
+ * Selected rows are sorted to appear before non-selected rows.
+ */
+
+import { BN } from '@polkadot/util';
+import { Row } from '@tanstack/react-table';
+
+export const sortSelected = <T extends { getIsSelected: () => boolean }>(
+  rowA: Row<T>,
+  rowB: Row<T>,
+) => {
+  const rowASelected = rowA.getIsSelected();
+  const rowBSelected = rowB.getIsSelected();
+  return rowASelected === rowBSelected ? 0 : rowASelected ? -1 : 1;
+};
+
+/**
+ * Function to sort rows based on the total value staked.
+ * Rows with higher staked values are sorted before those with lower values.
+ */
+export const sortValueStaked = <T extends { totalValueStaked: BN }>(
+  rowA: Row<T>,
+  rowB: Row<T>,
+) => {
+  const rowAValue = rowA.original.totalValueStaked;
+  const rowBValue = rowB.original.totalValueStaked;
+  return Number(rowAValue.sub(rowBValue).toString());
+};
+
+/**
+ * Function to sort rows based on commission values.
+ * Rows with lower commission values are sorted before those with higher values.
+ */
+export const sortCommission = <
+  T extends { validatorCommission?: BN; commission?: BN },
+>(
+  rowA: Row<T>,
+  rowB: Row<T>,
+) => {
+  const rowAValue =
+    Number(rowA.original.validatorCommission) ||
+    Number(rowA.original.commission);
+  const rowBValue =
+    Number(rowB.original.validatorCommission) ||
+    Number(rowB.original.commission);
+  return rowAValue - rowBValue;
+};
+
+/**
+ * Function to sort rows based on the number of delegations for collators.
+ * Rows with fewer delegations are sorted before those with more delegations.
+ */
+export const sortDelegationCount = <
+  T extends { collatorDelegationCount: number },
+>(
+  rowA: Row<T>,
+  rowB: Row<T>,
+) => {
+  const rowAValue = rowA.original.collatorDelegationCount;
+  const rowBValue = rowB.original.collatorDelegationCount;
+  return rowAValue - rowBValue;
+};
+
+/**
+ * Function to sort rows based on type.
+ * Uses localeCompare for string comparison to ensure proper alphabetical order.
+ */
+export const sortType = <T extends { type: string }>(
+  rowA: Row<T>,
+  rowB: Row<T>,
+) => {
+  const rowAType = rowA.original.type;
+  const rowBType = rowB.original.type;
+  return rowAType.localeCompare(rowBType);
+};
diff --git a/apps/tangle-dapp/data/liquidStaking/helper.ts b/apps/tangle-dapp/data/liquidStaking/fetchHelpers.ts
similarity index 95%
rename from apps/tangle-dapp/data/liquidStaking/helper.ts
rename to apps/tangle-dapp/data/liquidStaking/fetchHelpers.ts
index 08bbe4f8f0..0267c9a980 100644
--- a/apps/tangle-dapp/data/liquidStaking/helper.ts
+++ b/apps/tangle-dapp/data/liquidStaking/fetchHelpers.ts
@@ -18,6 +18,7 @@ export const fetchValidators = async (
 ): Promise<AccountId32[]> => {
   const api = await getApiPromise(rpcEndpoint);
   const validators = (await api.query.session.validators()).map((val) => val);
+
   return validators;
 };
 
@@ -40,11 +41,13 @@ export const fetchMappedIdentityNames = async (
 
     const validator = identity[0].args[0];
     const info = identity[1].unwrap()[0].info;
+
     const displayName =
       extractDataFromIdentityInfo(info, IdentityDataType.NAME) ||
       validator.toString();
     map.set(validator.toString(), displayName);
   });
+
   return map;
 };
 
@@ -62,6 +65,7 @@ export const fetchMappedValidatorsTotalValueStaked = async (
   const validators = await fetchValidators(rpcEndpoint);
 
   const erasStakersOverviewMap = new Map<string, BN>();
+
   const erasStakersOverviewEntries =
     await api.query.staking.erasStakersOverview.entries();
 
@@ -76,6 +80,7 @@ export const fetchMappedValidatorsTotalValueStaked = async (
     if (eraIndex === activeEraIndex.toNumber()) {
       const totalStaked =
         validatorExposure.unwrap().total.unwrap().toBn() || BN_ZERO;
+
       erasStakersOverviewMap.set(validator, totalStaked);
     }
   });
@@ -84,8 +89,10 @@ export const fetchMappedValidatorsTotalValueStaked = async (
 
   validators.forEach((validator) => {
     const totalStaked = erasStakersOverviewMap.get(validator.toString());
+
     map.set(validator.toString(), totalStaked || BN_ZERO);
   });
+
   return map;
 };
 
@@ -124,7 +131,8 @@ export const fetchChainDecimals = async (
   rpcEndpoint: string,
 ): Promise<number> => {
   const api = await getApiPromise(rpcEndpoint);
-  const chainDecimals = await api.registry.chainDecimals;
+  const chainDecimals = api.registry.chainDecimals;
+
   return chainDecimals.length > 0 ? chainDecimals[0] : 18;
 };
 
@@ -153,11 +161,11 @@ export const fetchDapps = async (rpcEndpoint: string): Promise<Dapp[]> => {
   const dapps = integratedDapps.map((dapp) => {
     const dappAddress = JSON.parse(dapp[0].args[0].toString());
     const dappIdOption = dapp[1] as Option<PalletDappStakingV3DAppInfo>;
-    let dappId = '';
 
-    if (dappIdOption.isSome) {
-      dappId = dappIdOption.unwrap().id.toString();
-    }
+    const dappId = dappIdOption.isSome
+      ? dappIdOption.unwrap().id.toString()
+      : '';
+
     return {
       id: dappId,
       address: dappAddress.evm || dappAddress.wasm,
@@ -178,10 +186,13 @@ export const fetchMappedDappsTotalValueStaked = async (
 
   const contractStakes = await api.query.dappStaking.contractStake.entries();
   const map = new Map<string, BN>();
+
   contractStakes.forEach((contractStake) => {
     const dappId = contractStake[0].args[0].toString();
+
     const stakeAmount =
       contractStake[1] as PalletDappStakingV3ContractStakeAmount;
+
     let totalStaked = BN_ZERO;
 
     if (!stakeAmount.isEmpty) {
@@ -246,7 +257,7 @@ export const fetchVaultsAndStakePools = async (
 
       if (poolInfoObj[type].basepool.totalValue !== undefined) {
         totalValueStaked = new BN(
-          cleanHexString(poolInfoObj[type].basepool.totalValue.toString()),
+          remove0xPrefix(poolInfoObj[type].basepool.totalValue.toString()),
           16,
         );
       }
@@ -307,6 +318,7 @@ export const fetchMappedCollatorInfo = async (
 
     if (info.isSome) {
       const infoObj = info.unwrap();
+
       totalStaked = infoObj.totalCounted.toBn() || BN_ZERO;
       delegationCount = infoObj.delegationCount.toNumber();
     }
@@ -321,12 +333,8 @@ export const fetchMappedCollatorInfo = async (
 };
 
 /** @internal */
-const cleanHexString = (hex: string) => {
-  if (!hex) return '';
-
-  if (hex.startsWith('0x')) {
-    hex = hex.slice(2);
-  }
-
-  return hex;
+const remove0xPrefix = (possibleHexString: string): string => {
+  return possibleHexString.startsWith('0x')
+    ? possibleHexString.slice(2)
+    : possibleHexString;
 };
diff --git a/apps/tangle-dapp/data/liquidStaking/useExchangeRate.ts b/apps/tangle-dapp/data/liquidStaking/useExchangeRate.ts
deleted file mode 100644
index 97c0e37d8e..0000000000
--- a/apps/tangle-dapp/data/liquidStaking/useExchangeRate.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
-import { useCallback, useEffect, useMemo } from 'react';
-import { erc20Abi } from 'viem';
-
-import {
-  LsErc20TokenDef,
-  LsParachainCurrencyKey,
-  LsProtocolId,
-} from '../../constants/liquidStaking/types';
-import useApiRx from '../../hooks/useApiRx';
-import calculateBnRatio from '../../utils/calculateBnRatio';
-import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
-import { ContractReadOptions } from '../liquifier/useContractRead';
-import useContractReadSubscription from '../liquifier/useContractReadSubscription';
-import usePolling, { PollingPrimaryCacheKey } from './usePolling';
-
-export enum ExchangeRateType {
-  NativeToLiquid,
-  LiquidToNative,
-}
-
-// TODO: This NEEDS to be based on subscription for sure, since exchange rates are always changing. Perhaps make it return whether it is re-fetching, so that an effect can be shown on the UI to indicate that it is fetching the latest exchange rate, and also have it be ran in a 3 or 5 second interval. Will also need de-duping logic, error handling, and also prevent spamming requests when the parent component is re-rendered many times (e.g. by using a ref to store the latest fetch timestamp). Might want to extract this pattern into its own hook, similar to a subscription. Also consider having a global store (Zustand) for that custom hook that uses caching to prevent spamming requests when the same hook is used in multiple components, might need to accept a custom 'key' parameter to use as the cache key.
-const useExchangeRate = (type: ExchangeRateType, protocolId: LsProtocolId) => {
-  const protocol = getLsProtocolDef(protocolId);
-
-  const { result: tokenPoolAmount } = useApiRx((api) => {
-    if (protocol.type !== 'parachain') {
-      return null;
-    }
-
-    const key: LsParachainCurrencyKey =
-      type === ExchangeRateType.NativeToLiquid
-        ? { Native: protocol.currency }
-        : { lst: protocol.currency };
-
-    return api.query.lstMinting.tokenPool(key);
-  }, TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.wsRpcEndpoint);
-
-  const { result: lstTotalIssuance } = useApiRx((api) => {
-    if (protocol.type !== 'parachain') {
-      return null;
-    }
-
-    return api.query.tokens.totalIssuance({ lst: protocol.currency });
-  }, TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.wsRpcEndpoint);
-
-  const parachainExchangeRate = useMemo(async () => {
-    // Not yet ready.
-    if (tokenPoolAmount === null || lstTotalIssuance === null) {
-      return null;
-    }
-
-    const isEitherZero = tokenPoolAmount.isZero() || lstTotalIssuance.isZero();
-
-    // TODO: Need to review whether this is the right way to handle this edge case.
-    // Special case: No native tokens or liquidity available for conversion.
-    // Default to 1:1 exchange rate. This also helps prevent division by zero.
-    if (isEitherZero) {
-      return 1;
-    }
-
-    const ratio =
-      type === ExchangeRateType.NativeToLiquid
-        ? calculateBnRatio(lstTotalIssuance, tokenPoolAmount)
-        : calculateBnRatio(tokenPoolAmount, lstTotalIssuance);
-
-    return ratio;
-  }, [lstTotalIssuance, tokenPoolAmount, type]);
-
-  const fetchErc20ExchangeRate = useCallback(
-    async (_erc20TokenDef: LsErc20TokenDef) => {
-      // TODO: Implement.
-
-      return 0;
-    },
-    [],
-  );
-
-  const fetcher = useCallback(() => {
-    return protocol.type === 'parachain'
-      ? parachainExchangeRate
-      : fetchErc20ExchangeRate(protocol);
-  }, [fetchErc20ExchangeRate, parachainExchangeRate, protocol]);
-
-  const totalSupplyFetcher = useCallback((): ContractReadOptions<
-    typeof erc20Abi,
-    'totalSupply'
-  > | null => {
-    if (protocol.type !== 'erc20') {
-      return null;
-    }
-
-    return {
-      address: protocol.address,
-      functionName: 'totalSupply',
-      args: [],
-    };
-  }, [protocol]);
-
-  // TODO: Will need one for the LST total issuance, and another for the token pool amount.
-  const {
-    value: _erc20TotalIssuance,
-    setIsPaused: setIsErc20TotalIssuancePaused,
-  } = useContractReadSubscription(erc20Abi, totalSupplyFetcher);
-
-  // Pause or resume ERC20-based exchange rate fetching based
-  // on whether the requested protocol is a parachain or an ERC20 token.
-  // This helps prevent unnecessary requests.
-  useEffect(() => {
-    const isPaused = protocol.type === 'parachain';
-
-    setIsErc20TotalIssuancePaused(isPaused);
-  }, [protocol.type, setIsErc20TotalIssuancePaused]);
-
-  // TODO: Use polling for the ERC20 exchange rate, NOT the parachain exchange rate which is already based on a subscription. Might need a mechanism to 'pause' polling when the selected protocol is a parachain chain, that way it doesn't make unnecessary requests until an ERC20 token is selected.
-  const { value: exchangeRate, isRefreshing } = usePolling({
-    fetcher,
-    // Refresh every 5 seconds.
-    refreshInterval: 5_000,
-    primaryCacheKey: PollingPrimaryCacheKey.EXCHANGE_RATE,
-    cacheKey: ['exchangeRate', protocolId],
-  });
-
-  return { exchangeRate, isRefreshing };
-};
-
-export default useExchangeRate;
diff --git a/apps/tangle-dapp/data/liquidStaking/useLiquidStakingStore.ts b/apps/tangle-dapp/data/liquidStaking/useLiquidStakingStore.ts
deleted file mode 100644
index 6f5da45f3a..0000000000
--- a/apps/tangle-dapp/data/liquidStaking/useLiquidStakingStore.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { create } from 'zustand';
-
-import { LsProtocolId } from '../../constants/liquidStaking/types';
-
-type State = {
-  selectedProtocolId: LsProtocolId;
-  selectedItems: Set<string>;
-};
-
-type Actions = {
-  setSelectedProtocolId: (selectedChainId: State['selectedProtocolId']) => void;
-  setSelectedItems: (selectedItems: State['selectedItems']) => void;
-};
-
-type Store = State & Actions;
-
-export const useLiquidStakingStore = create<Store>((set) => ({
-  selectedProtocolId: LsProtocolId.TANGLE_RESTAKING_PARACHAIN,
-  selectedItems: new Set<string>(),
-  setSelectedProtocolId: (selectedChainId) =>
-    set({ selectedProtocolId: selectedChainId }),
-  setSelectedItems: (selectedItems) => set({ selectedItems }),
-}));
diff --git a/apps/tangle-dapp/data/liquidStaking/useLsExchangeRate.ts b/apps/tangle-dapp/data/liquidStaking/useLsExchangeRate.ts
new file mode 100644
index 0000000000..334434f8a4
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/useLsExchangeRate.ts
@@ -0,0 +1,191 @@
+import { BN } from '@polkadot/util';
+import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { erc20Abi } from 'viem';
+
+import LIQUIFIER_ADAPTER_ABI from '../../constants/liquidStaking/liquifierAdapterAbi';
+import LIQUIFIER_TG_TOKEN_ABI from '../../constants/liquidStaking/liquifierTgTokenAbi';
+import {
+  LsNetworkId,
+  LsParachainCurrencyKey,
+  LsProtocolId,
+} from '../../constants/liquidStaking/types';
+import useApiRx from '../../hooks/useApiRx';
+import calculateBnRatio from '../../utils/calculateBnRatio';
+import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
+import useContractRead from '../liquifier/useContractRead';
+import { ContractReadOptions } from '../liquifier/useContractReadOnce';
+import usePolling from './usePolling';
+
+export enum ExchangeRateType {
+  NativeToDerivative,
+  DerivativeToNative,
+}
+
+const computeExchangeRate = (
+  type: ExchangeRateType,
+  totalNativeSupply: BN,
+  totalDerivativeSupply: BN,
+) => {
+  const isEitherZero =
+    totalNativeSupply.isZero() || totalDerivativeSupply.isZero();
+
+  // TODO: Need to review whether this is the right way to handle this edge case.
+  // Special case: No native tokens or liquidity available for conversion.
+  // Default to 1:1 exchange rate. This also helps prevent division by zero.
+  if (isEitherZero) {
+    return 1;
+  }
+
+  const ratio =
+    type === ExchangeRateType.NativeToDerivative
+      ? calculateBnRatio(totalDerivativeSupply, totalNativeSupply)
+      : calculateBnRatio(totalNativeSupply, totalDerivativeSupply);
+
+  return ratio;
+};
+
+const MAX_BN_OPERATION_NUMBER = 2 ** 26 - 1;
+
+const useLsExchangeRate = (
+  type: ExchangeRateType,
+  protocolId: LsProtocolId,
+) => {
+  const [exchangeRate, setExchangeRate] = useState<number | Error | null>(null);
+
+  const protocol = getLsProtocolDef(protocolId);
+
+  const { result: tokenPoolAmount } = useApiRx((api) => {
+    if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
+      return null;
+    }
+
+    const key: LsParachainCurrencyKey =
+      type === ExchangeRateType.NativeToDerivative
+        ? { Native: protocol.currency }
+        : { lst: protocol.currency };
+
+    return api.query.lstMinting.tokenPool(key);
+  }, TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.wsRpcEndpoint);
+
+  const { result: lstTotalIssuance } = useApiRx((api) => {
+    if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
+      return null;
+    }
+
+    return api.query.tokens.totalIssuance({ lst: protocol.currency });
+  }, TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.wsRpcEndpoint);
+
+  const parachainExchangeRate = useMemo(async () => {
+    // Not yet ready.
+    if (tokenPoolAmount === null || lstTotalIssuance === null) {
+      return null;
+    }
+
+    return computeExchangeRate(type, tokenPoolAmount, lstTotalIssuance);
+  }, [lstTotalIssuance, tokenPoolAmount, type]);
+
+  const getTgTokenTotalSupplyOptions = useCallback((): ContractReadOptions<
+    typeof LIQUIFIER_TG_TOKEN_ABI,
+    'totalSupply'
+  > | null => {
+    if (protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) {
+      return null;
+    }
+
+    return {
+      address: protocol.erc20TokenAddress,
+      functionName: 'totalSupply',
+      args: [],
+    };
+  }, [protocol]);
+
+  const getLiquifierTotalSharesOptions = useCallback((): ContractReadOptions<
+    typeof LIQUIFIER_ADAPTER_ABI,
+    'totalShares'
+  > | null => {
+    if (protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) {
+      return null;
+    }
+
+    return {
+      address: protocol.liquifierContractAddress,
+      functionName: 'totalShares',
+      args: [],
+    };
+  }, [protocol]);
+
+  const {
+    value: tgTokenTotalSupply,
+    setIsPaused: setIsTgTokenTotalSupplyPaused,
+  } = useContractRead(erc20Abi, getTgTokenTotalSupplyOptions);
+
+  const {
+    value: liquifierTotalShares,
+    setIsPaused: setIsLiquifierTotalSharesPaused,
+  } = useContractRead(LIQUIFIER_ADAPTER_ABI, getLiquifierTotalSharesOptions);
+
+  const fetchLiquifierExchangeRate = useCallback(async () => {
+    // Propagate error or loading states.
+    if (typeof tgTokenTotalSupply !== 'bigint') {
+      return tgTokenTotalSupply;
+    } else if (typeof liquifierTotalShares !== 'bigint') {
+      return liquifierTotalShares;
+    }
+
+    const tgTokenTotalSupplyBn = new BN(tgTokenTotalSupply.toString());
+    const liquifierTotalSharesBn = new BN(liquifierTotalShares.toString());
+
+    return computeExchangeRate(
+      type,
+      tgTokenTotalSupplyBn,
+      liquifierTotalSharesBn,
+    );
+  }, [liquifierTotalShares, tgTokenTotalSupply, type]);
+
+  const fetch = useCallback(async () => {
+    const promise =
+      protocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN
+        ? parachainExchangeRate
+        : fetchLiquifierExchangeRate();
+
+    const newExchangeRate = await promise;
+
+    // Still loading. Do not update the value. Display the stale
+    // value.
+    if (newExchangeRate === null) {
+      return;
+    }
+
+    setExchangeRate(newExchangeRate);
+  }, [fetchLiquifierExchangeRate, parachainExchangeRate, protocol]);
+
+  // Pause or resume ERC20-based exchange rate fetching based
+  // on whether the requested protocol is a parachain or an ERC20 token.
+  // This helps prevent unnecessary requests.
+  useEffect(() => {
+    const isPaused =
+      protocol.networkId === LsNetworkId.TANGLE_RESTAKING_PARACHAIN;
+
+    setIsTgTokenTotalSupplyPaused(isPaused);
+    setIsLiquifierTotalSharesPaused(isPaused);
+  }, [
+    protocol.networkId,
+    setIsLiquifierTotalSharesPaused,
+    setIsTgTokenTotalSupplyPaused,
+  ]);
+
+  const isRefreshing = usePolling({ effect: fetch });
+
+  return {
+    exchangeRate:
+      // For some undocumented reason, BN.js can perform number operations
+      // on BN instances that are up to 2^26 - 1.
+      typeof exchangeRate === 'number'
+        ? Math.min(MAX_BN_OPERATION_NUMBER, exchangeRate)
+        : exchangeRate,
+    isRefreshing,
+  };
+};
+
+export default useLsExchangeRate;
diff --git a/apps/tangle-dapp/data/liquidStaking/useLsProtocolEntities.ts b/apps/tangle-dapp/data/liquidStaking/useLsProtocolEntities.ts
new file mode 100644
index 0000000000..1bddab5a30
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/useLsProtocolEntities.ts
@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { LsNetworkId, LsProtocolId } from '../../constants/liquidStaking/types';
+import useLocalStorage, { LocalStorageKey } from '../../hooks/useLocalStorage';
+import { LiquidStakingItem } from '../../types/liquidStaking';
+import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
+import { ProtocolEntity } from './adapter';
+
+const useLsProtocolEntities = (protocolId: LsProtocolId) => {
+  const { setWithPreviousValue: setLiquidStakingTableData } = useLocalStorage(
+    LocalStorageKey.LIQUID_STAKING_TABLE_DATA,
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [entities, setEntities] = useState<ProtocolEntity[]>([]);
+
+  const dataType = getDataType(protocolId);
+
+  const fetchData = useCallback(
+    async (protocolId: LsProtocolId) => {
+      const protocol = getLsProtocolDef(protocolId);
+
+      if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
+        setEntities([]);
+        setIsLoading(false);
+
+        return;
+      }
+
+      const newEntities = await protocol.adapter.fetchProtocolEntities(
+        protocol.rpcEndpoint,
+      );
+
+      setEntities(newEntities);
+
+      setLiquidStakingTableData((prev) => ({
+        ...prev?.value,
+        [protocolId]: newEntities,
+      }));
+
+      setIsLoading(false);
+    },
+    [setLiquidStakingTableData],
+  );
+
+  // Whenever the selected protocol changes, fetch the data for
+  // the new protocol.
+  useEffect(() => {
+    setEntities([]);
+    setIsLoading(true);
+    fetchData(protocolId);
+  }, [protocolId, fetchData]);
+
+  return {
+    isLoading,
+    data: entities,
+    dataType,
+  };
+};
+
+const getDataType = (chain: LsProtocolId): LiquidStakingItem | null => {
+  switch (chain) {
+    case LsProtocolId.MANTA:
+      return LiquidStakingItem.COLLATOR;
+    case LsProtocolId.MOONBEAM:
+      return LiquidStakingItem.COLLATOR;
+    case LsProtocolId.POLKADOT:
+      return LiquidStakingItem.VALIDATOR;
+    case LsProtocolId.PHALA:
+      return LiquidStakingItem.VAULT_OR_STAKE_POOL;
+    case LsProtocolId.ASTAR:
+      return LiquidStakingItem.DAPP;
+    case LsProtocolId.CHAINLINK:
+    case LsProtocolId.LIVEPEER:
+    case LsProtocolId.POLYGON:
+    case LsProtocolId.THE_GRAPH:
+      return null;
+  }
+};
+
+export default useLsProtocolEntities;
diff --git a/apps/tangle-dapp/data/liquidStaking/useLsStore.ts b/apps/tangle-dapp/data/liquidStaking/useLsStore.ts
new file mode 100644
index 0000000000..eb47616b3c
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/useLsStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+
+import { LsNetworkId, LsProtocolId } from '../../constants/liquidStaking/types';
+import getLsNetwork from '../../utils/liquidStaking/getLsNetwork';
+
+type State = {
+  selectedNetworkId: LsNetworkId;
+  selectedProtocolId: LsProtocolId;
+  selectedItems: Set<string>;
+};
+
+type Actions = {
+  setSelectedProtocolId: (newProtocolId: State['selectedProtocolId']) => void;
+  setSelectedItems: (selectedItems: State['selectedItems']) => void;
+  setSelectedNetworkId: (newNetworkId: State['selectedNetworkId']) => void;
+};
+
+type Store = State & Actions;
+
+export const useLsStore = create<Store>((set) => ({
+  selectedNetworkId: LsNetworkId.TANGLE_RESTAKING_PARACHAIN,
+  selectedProtocolId: LsProtocolId.POLKADOT,
+  selectedItems: new Set<string>(),
+  setSelectedProtocolId: (selectedChainId) =>
+    set({ selectedProtocolId: selectedChainId }),
+  setSelectedItems: (selectedItems) => set({ selectedItems }),
+  setSelectedNetworkId: (selectedNetworkId) => {
+    const network = getLsNetwork(selectedNetworkId);
+    const defaultProtocolId = network.defaultProtocolId;
+
+    set({ selectedNetworkId, selectedProtocolId: defaultProtocolId });
+  },
+}));
diff --git a/apps/tangle-dapp/hooks/LiquidStaking/useLiquidStakingSelectionTableColumns.tsx b/apps/tangle-dapp/data/liquidStaking/useLsValidatorSelectionTableColumns.tsx
similarity index 98%
rename from apps/tangle-dapp/hooks/LiquidStaking/useLiquidStakingSelectionTableColumns.tsx
rename to apps/tangle-dapp/data/liquidStaking/useLsValidatorSelectionTableColumns.tsx
index 8cb87f82b5..99961bf68c 100644
--- a/apps/tangle-dapp/hooks/LiquidStaking/useLiquidStakingSelectionTableColumns.tsx
+++ b/apps/tangle-dapp/data/liquidStaking/useLsValidatorSelectionTableColumns.tsx
@@ -21,18 +21,21 @@ import {
   Collator,
   Dapp,
   LiquidStakingItem,
+  PhalaVaultOrStakePool,
   Validator,
-  VaultOrStakePool,
 } from '../../types/liquidStaking';
 import calculateCommission from '../../utils/calculateCommission';
 import formatBn from '../../utils/formatBn';
 
 const validatorColumnHelper = createColumnHelper<Validator>();
 const dappColumnHelper = createColumnHelper<Dapp>();
-const vaultOrStakePoolColumnHelper = createColumnHelper<VaultOrStakePool>();
+
+const vaultOrStakePoolColumnHelper =
+  createColumnHelper<PhalaVaultOrStakePool>();
+
 const collatorColumnHelper = createColumnHelper<Collator>();
 
-export const useLiquidStakingSelectionTableColumns = (
+export const useLsValidatorSelectionTableColumns = (
   toggleSortSelectionHandlerRef: React.MutableRefObject<
     ((desc?: boolean | undefined, isMulti?: boolean | undefined) => void) | null
   >,
@@ -299,7 +302,7 @@ export const useLiquidStakingSelectionTableColumns = (
             </div>
           );
         },
-        sortingFn: sortSelected as SortingFnOption<VaultOrStakePool>,
+        sortingFn: sortSelected as SortingFnOption<PhalaVaultOrStakePool>,
       }),
       vaultOrStakePoolColumnHelper.accessor('type', {
         header: ({ header }) => (
@@ -382,7 +385,7 @@ export const useLiquidStakingSelectionTableColumns = (
             </Typography>
           </div>
         ),
-        sortingFn: sortCommission as SortingFnOption<VaultOrStakePool>,
+        sortingFn: sortCommission as SortingFnOption<PhalaVaultOrStakePool>,
       }),
       vaultOrStakePoolColumnHelper.accessor('href', {
         header: () => <span></span>,
diff --git a/apps/tangle-dapp/data/liquidStaking/useLiquidStakingItems.ts b/apps/tangle-dapp/data/liquidStaking/useLsValidators.ts
similarity index 93%
rename from apps/tangle-dapp/data/liquidStaking/useLiquidStakingItems.ts
rename to apps/tangle-dapp/data/liquidStaking/useLsValidators.ts
index 6cde28d83f..6462b7b9e9 100644
--- a/apps/tangle-dapp/data/liquidStaking/useLiquidStakingItems.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useLsValidators.ts
@@ -1,14 +1,14 @@
 import { BN_ZERO } from '@polkadot/util';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { LsProtocolId } from '../../constants/liquidStaking/types';
+import { LsNetworkId, LsProtocolId } from '../../constants/liquidStaking/types';
 import useLocalStorage, { LocalStorageKey } from '../../hooks/useLocalStorage';
 import {
   Collator,
   Dapp,
   LiquidStakingItem,
+  PhalaVaultOrStakePool,
   Validator,
-  VaultOrStakePool,
 } from '../../types/liquidStaking';
 import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
 import {
@@ -23,9 +23,9 @@ import {
   fetchTokenSymbol,
   fetchValidators,
   fetchVaultsAndStakePools,
-} from './helper';
+} from './fetchHelpers';
 
-const useLiquidStakingItems = (selectedChain: LsProtocolId) => {
+const useLsValidators = (selectedChain: LsProtocolId) => {
   const { setWithPreviousValue: setLiquidStakingTableData } = useLocalStorage(
     LocalStorageKey.LIQUID_STAKING_TABLE_DATA,
   );
@@ -33,7 +33,7 @@ const useLiquidStakingItems = (selectedChain: LsProtocolId) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const [items, setItems] = useState<
-    Validator[] | VaultOrStakePool[] | Dapp[] | Collator[]
+    Validator[] | PhalaVaultOrStakePool[] | Dapp[] | Collator[]
   >([]);
 
   const dataType = useMemo(() => getDataType(selectedChain), [selectedChain]);
@@ -42,15 +42,18 @@ const useLiquidStakingItems = (selectedChain: LsProtocolId) => {
     async (protocolId: LsProtocolId) => {
       const protocol = getLsProtocolDef(protocolId);
 
-      if (protocol.type !== 'parachain') {
+      if (protocol.networkId !== LsNetworkId.TANGLE_RESTAKING_PARACHAIN) {
         setItems([]);
         setIsLoading(false);
 
         return;
       }
 
-      let fetchedItems: Validator[] | VaultOrStakePool[] | Dapp[] | Collator[] =
-        [];
+      let fetchedItems:
+        | Validator[]
+        | PhalaVaultOrStakePool[]
+        | Dapp[]
+        | Collator[] = [];
 
       switch (protocolId) {
         case LsProtocolId.POLKADOT:
@@ -112,7 +115,7 @@ const useLiquidStakingItems = (selectedChain: LsProtocolId) => {
   };
 };
 
-export default useLiquidStakingItems;
+export default useLsValidators;
 
 const getDataType = (chain: LsProtocolId) => {
   switch (chain) {
@@ -120,7 +123,6 @@ const getDataType = (chain: LsProtocolId) => {
       return LiquidStakingItem.COLLATOR;
     case LsProtocolId.MOONBEAM:
       return LiquidStakingItem.COLLATOR;
-    case LsProtocolId.TANGLE_RESTAKING_PARACHAIN:
     case LsProtocolId.POLKADOT:
       return LiquidStakingItem.VALIDATOR;
     case LsProtocolId.PHALA:
@@ -219,7 +221,7 @@ const getDapps = async (endpoint: string): Promise<Dapp[]> => {
 
 const getVaultsAndStakePools = async (
   endpoint: string,
-): Promise<VaultOrStakePool[]> => {
+): Promise<PhalaVaultOrStakePool[]> => {
   const [vaultsAndStakePools, chainDecimals, chainTokenSymbol] =
     await Promise.all([
       fetchVaultsAndStakePools(endpoint),
diff --git a/apps/tangle-dapp/data/liquidStaking/useLstUnlockRequests.ts b/apps/tangle-dapp/data/liquidStaking/useLstUnlockRequests.ts
index 8411451ec1..f7d6c98ac3 100644
--- a/apps/tangle-dapp/data/liquidStaking/useLstUnlockRequests.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useLstUnlockRequests.ts
@@ -12,7 +12,7 @@ import { useCallback, useMemo } from 'react';
 import { map } from 'rxjs';
 
 import {
-  LsSimpleParachainTimeUnit,
+  LsParachainSimpleTimeUnit,
   ParachainCurrency,
 } from '../../constants/liquidStaking/types';
 import useApiRx from '../../hooks/useApiRx';
@@ -25,7 +25,7 @@ export type LstUnlockRequest = {
   unlockId: number;
   currencyType: TanglePrimitivesCurrencyCurrencyId['type'];
   currency: ParachainCurrency;
-  unlockTimeUnit: LsSimpleParachainTimeUnit;
+  unlockTimeUnit: LsParachainSimpleTimeUnit;
   amount: BN;
 };
 
diff --git a/apps/tangle-dapp/data/liquidStaking/useOngoingTimeUnits.ts b/apps/tangle-dapp/data/liquidStaking/useOngoingTimeUnits.ts
index 02b14d2a2d..6326a8d238 100644
--- a/apps/tangle-dapp/data/liquidStaking/useOngoingTimeUnits.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useOngoingTimeUnits.ts
@@ -3,7 +3,7 @@ import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-u
 import { useCallback, useMemo } from 'react';
 
 import {
-  LsSimpleParachainTimeUnit,
+  LsParachainSimpleTimeUnit,
   ParachainCurrency,
 } from '../../constants/liquidStaking/types';
 import useApiRx from '../../hooks/useApiRx';
@@ -13,7 +13,7 @@ import getValueOfTangleCurrency from './getValueOfTangleCurrency';
 export type OngoingTimeUnitEntry = {
   currencyType: TanglePrimitivesCurrencyCurrencyId['type'];
   currency: ParachainCurrency;
-  timeUnit: LsSimpleParachainTimeUnit;
+  timeUnit: LsParachainSimpleTimeUnit;
 };
 
 const useOngoingTimeUnits = () => {
diff --git a/apps/tangle-dapp/data/liquidStaking/useMintAndRedeemFees.ts b/apps/tangle-dapp/data/liquidStaking/useParachainLsFees.ts
similarity index 90%
rename from apps/tangle-dapp/data/liquidStaking/useMintAndRedeemFees.ts
rename to apps/tangle-dapp/data/liquidStaking/useParachainLsFees.ts
index 7a65dc678b..a724c715d9 100644
--- a/apps/tangle-dapp/data/liquidStaking/useMintAndRedeemFees.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useParachainLsFees.ts
@@ -5,7 +5,7 @@ import { map } from 'rxjs';
 import useApiRx from '../../hooks/useApiRx';
 import permillToPercentage from '../../utils/permillToPercentage';
 
-const useMintAndRedeemFees = () => {
+const useParachainLsFees = () => {
   return useApiRx(
     useCallback((api) => {
       return api.query.lstMinting.fees().pipe(
@@ -24,4 +24,4 @@ const useMintAndRedeemFees = () => {
   );
 };
 
-export default useMintAndRedeemFees;
+export default useParachainLsFees;
diff --git a/apps/tangle-dapp/data/liquidStaking/usePolling.ts b/apps/tangle-dapp/data/liquidStaking/usePolling.ts
index e6fb1ac56e..0c23d96a4b 100644
--- a/apps/tangle-dapp/data/liquidStaking/usePolling.ts
+++ b/apps/tangle-dapp/data/liquidStaking/usePolling.ts
@@ -1,48 +1,48 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-export enum PollingPrimaryCacheKey {
-  EXCHANGE_RATE,
-  CONTRACT_READ_SUBSCRIPTION,
-  LS_ERC20_BALANCE,
-}
-
-export type PollingOptions<T> = {
-  fetcher: (() => Promise<T> | T) | null;
+export type PollingOptions = {
+  effect: (() => Promise<unknown> | unknown) | null;
   refreshInterval?: number;
-  primaryCacheKey: PollingPrimaryCacheKey;
-  cacheKey?: unknown[];
 };
 
-// TODO: Use Zustand global store for caching.
-
-const usePolling = <T>({
-  fetcher,
-  // Default to a 3 second refresh interval.
-  refreshInterval = 3_000,
-  primaryCacheKey: _primaryCacheKey,
-  cacheKey: _cacheKey,
-}: PollingOptions<T>) => {
-  const [value, setValue] = useState<T | null>(null);
+const usePolling = ({
+  effect,
+  // Default to a 12 second refresh interval. This default is also
+  // convenient since it matches the expected block time of Ethereum
+  // as well as some Substrate-based chains.
+  refreshInterval = 12_000,
+}: PollingOptions) => {
   const [isRefreshing, setIsRefreshing] = useState(false);
 
+  const refresh = useCallback(async () => {
+    // Fetcher isn't ready to be called yet.
+    if (effect === null) {
+      return;
+    }
+
+    setIsRefreshing(true);
+    await effect();
+    setIsRefreshing(false);
+  }, [effect]);
+
   useEffect(() => {
-    const intervalHandle = setInterval(async () => {
-      // Fetcher isn't ready to be called yet.
-      if (fetcher === null) {
-        return;
-      }
+    let intervalHandle: ReturnType<typeof setInterval> | null = null;
+
+    (async () => {
+      // Call it immediately to avoid initial delay.
+      await refresh();
 
-      setIsRefreshing(true);
-      setValue(await fetcher());
-      setIsRefreshing(false);
-    }, refreshInterval);
+      intervalHandle = setInterval(refresh, refreshInterval);
+    })();
 
     return () => {
-      clearInterval(intervalHandle);
+      if (intervalHandle !== null) {
+        clearInterval(intervalHandle);
+      }
     };
-  }, [fetcher, refreshInterval]);
+  }, [effect, refresh, refreshInterval]);
 
-  return { value, isRefreshing };
+  return isRefreshing;
 };
 
 export default usePolling;
diff --git a/apps/tangle-dapp/data/liquidStaking/useTokenUnlockDurations.ts b/apps/tangle-dapp/data/liquidStaking/useTokenUnlockDurations.ts
index 658fc993ad..ab5194cb4e 100644
--- a/apps/tangle-dapp/data/liquidStaking/useTokenUnlockDurations.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useTokenUnlockDurations.ts
@@ -6,7 +6,7 @@ import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-u
 import { useCallback, useMemo } from 'react';
 
 import {
-  LsSimpleParachainTimeUnit,
+  LsParachainSimpleTimeUnit,
   ParachainCurrency,
 } from '../../constants/liquidStaking/types';
 import useApiRx from '../../hooks/useApiRx';
@@ -16,7 +16,7 @@ import getValueOfTangleCurrency from './getValueOfTangleCurrency';
 export type TokenUnlockDurationEntry = {
   isNative: boolean;
   currency: ParachainCurrency;
-  timeUnit: LsSimpleParachainTimeUnit;
+  timeUnit: LsParachainSimpleTimeUnit;
 };
 
 const useTokenUnlockDurations = () => {
diff --git a/apps/tangle-dapp/data/liquifier/useContractRead.ts b/apps/tangle-dapp/data/liquifier/useContractRead.ts
index dcc15856d2..de0c8da32f 100644
--- a/apps/tangle-dapp/data/liquifier/useContractRead.ts
+++ b/apps/tangle-dapp/data/liquifier/useContractRead.ts
@@ -1,77 +1,87 @@
-import { HexString } from '@polkadot/util/types';
-import assert from 'assert';
-import { useCallback } from 'react';
+import { PromiseOrT } from '@webb-tools/abstract-api-provider';
+import { useCallback, useEffect, useState } from 'react';
 import {
   Abi as ViemAbi,
   ContractFunctionArgs,
   ContractFunctionName,
+  ContractFunctionReturnType,
 } from 'viem';
-import { mainnet, sepolia } from 'viem/chains';
-import { ReadContractReturnType } from 'wagmi/actions';
 
-import { IS_PRODUCTION_ENV } from '../../constants/env';
-import ensureError from '../../utils/ensureError';
-import useViemPublicClientWithChain from './useViemPublicClientWithChain';
+import useDebugMetricsStore from '../../context/useDebugMetricsStore';
+import usePolling from '../liquidStaking/usePolling';
+import useContractReadOnce, {
+  ContractReadOptions,
+} from './useContractReadOnce';
 
-export type ContractReadOptions<
+/**
+ * Continuously reads a contract function, refreshing the value
+ * at a specified interval.
+ */
+const useContractRead = <
   Abi extends ViemAbi,
   FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>,
-> = {
-  address: HexString;
-  functionName: FunctionName;
-  args: ContractFunctionArgs<Abi, 'pure' | 'view', FunctionName>;
-};
-
-const useContractRead = <Abi extends ViemAbi>(abi: Abi) => {
-  // Use Sepolia testnet for development, and mainnet for production.
-  // Some dummy contracts were deployed on Sepolia for testing purposes.
-  const chain = IS_PRODUCTION_ENV ? mainnet : sepolia;
-
-  const publicClient = useViemPublicClientWithChain(chain);
-
-  const read = useCallback(
-    async <FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>>({
-      address,
-      functionName,
-      args,
-    }: ContractReadOptions<Abi, FunctionName>): Promise<
-      | ReadContractReturnType<
+>(
+  abi: Abi,
+  options:
+    | ContractReadOptions<Abi, FunctionName>
+    // Allow consumers to provide a function that returns the options.
+    // This is useful for when the options are dependent on some state.
+    | (() => PromiseOrT<ContractReadOptions<Abi, FunctionName> | null>),
+) => {
+  type ReturnType =
+    | Error
+    | Awaited<
+        ContractFunctionReturnType<
           Abi,
+          'pure' | 'view',
           FunctionName,
           ContractFunctionArgs<Abi, 'pure' | 'view', FunctionName>
         >
-      | Error
-    > => {
-      assert(
-        publicClient !== null,
-        "Should not be able to call this function if the client isn't ready yet",
-      );
+      >;
+
+  const [value, setValue] = useState<ReturnType | null>(null);
+  const [isPaused, setIsPaused] = useState(false);
+  const readOnce = useContractReadOnce(abi);
 
-      try {
-        return await publicClient.readContract({
-          address,
-          abi,
-          functionName,
-          args,
-        });
-      } catch (possibleError) {
-        const error = ensureError(possibleError);
+  const { incrementSubscriptionCount, decrementSubscriptionCount } =
+    useDebugMetricsStore();
 
-        console.error(
-          `Error reading contract ${address} function ${functionName}:`,
-          error,
-        );
+  // Register and deregister subscription count entry to keep track
+  // of performance metrics.
+  useEffect(() => {
+    isPaused ? decrementSubscriptionCount() : incrementSubscriptionCount();
 
-        return error;
+    return () => {
+      if (!isPaused) {
+        decrementSubscriptionCount();
       }
-    },
-    [abi, publicClient],
-  );
+    };
+  }, [decrementSubscriptionCount, incrementSubscriptionCount, isPaused]);
+
+  const fetcher = useCallback(async () => {
+    // Not yet ready to fetch.
+    if (isPaused || readOnce === null) {
+      return null;
+    }
+
+    const options_ = typeof options === 'function' ? await options() : options;
+
+    // If the options are null, it means that the consumer
+    // of this hook does not want to fetch the data at this time.
+    if (options_ === null) {
+      return null;
+    }
+
+    setValue(await readOnce(options_));
+  }, [isPaused, options, readOnce]);
 
-  // TODO: This only loads the balance once. Make it so it updates every few seconds that way the it responds to any balance changes that may occur, not just when loading the site initially. Like a subscription. So, add an extra function like `readStream` or `subscribe` that will allow the user to subscribe to the contract and get updates whenever the contract changes.
+  usePolling({
+    // By providing null, it signals to the hook to maintain
+    // its current value and not refresh.
+    effect: isPaused ? null : fetcher,
+  });
 
-  // Only provide the read functions once the public client is ready.
-  return publicClient === null ? null : read;
+  return { value, isPaused, setIsPaused };
 };
 
 export default useContractRead;
diff --git a/apps/tangle-dapp/data/liquifier/useContractReadBatch.ts b/apps/tangle-dapp/data/liquifier/useContractReadBatch.ts
new file mode 100644
index 0000000000..5e41f2cece
--- /dev/null
+++ b/apps/tangle-dapp/data/liquifier/useContractReadBatch.ts
@@ -0,0 +1,104 @@
+import { PromiseOrT } from '@webb-tools/abstract-api-provider';
+import { useCallback, useState } from 'react';
+import {
+  Abi as ViemAbi,
+  ContractFunctionArgs,
+  ContractFunctionName,
+  ContractFunctionReturnType,
+} from 'viem';
+import { mainnet, sepolia } from 'viem/chains';
+
+import { IS_PRODUCTION_ENV } from '../../constants/env';
+import ensureError from '../../utils/ensureError';
+import usePolling from '../liquidStaking/usePolling';
+import { ContractReadOptions } from './useContractReadOnce';
+import useViemPublicClientWithChain from './useViemPublicClientWithChain';
+
+export type ContractReadOptionsBatch<
+  Abi extends ViemAbi,
+  FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>,
+> = Omit<ContractReadOptions<Abi, FunctionName>, 'args'> & {
+  args: ContractReadOptions<Abi, FunctionName>['args'][];
+};
+
+const useContractReadBatch = <
+  Abi extends ViemAbi,
+  FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>,
+>(
+  abi: Abi,
+  options:
+    | ContractReadOptionsBatch<Abi, FunctionName>
+    // Allow consumers to provide a function that returns the options.
+    // This is useful for when the options are dependent on some state.
+    | (() => PromiseOrT<ContractReadOptionsBatch<Abi, FunctionName> | null>),
+) => {
+  type ValueType = ContractFunctionReturnType<
+    Abi,
+    'pure' | 'view',
+    FunctionName,
+    ContractFunctionArgs<Abi, 'pure' | 'view', FunctionName>
+  >;
+
+  type ReturnType = (Error | Awaited<ValueType>)[];
+
+  const [results, setResults] = useState<ReturnType | null>(null);
+
+  // Use Sepolia testnet for development, and mainnet for production.
+  // Some dummy contracts were deployed on Sepolia for testing purposes.
+  const chain = IS_PRODUCTION_ENV ? mainnet : sepolia;
+
+  const publicClient = useViemPublicClientWithChain(chain);
+
+  const refresh = useCallback(async () => {
+    // Not yet ready to fetch.
+    if (publicClient === null) {
+      return null;
+    }
+
+    const options_ = typeof options === 'function' ? await options() : options;
+
+    // If the options are null, it means that the consumer
+    // of this hook does not want to fetch the data at this time.
+    if (options_ === null) {
+      return null;
+    }
+    // Remind developer about possible performance impact.
+    else if (!IS_PRODUCTION_ENV && options_.args.length >= 50) {
+      console.warn(
+        'Reading a large amount of contracts simultaneously may affect performance, please consider utilizing pagination',
+      );
+    }
+
+    const targets = options_.args.map((args) => ({
+      abi: abi,
+      ...options_,
+      args,
+    }));
+
+    // See: https://viem.sh/docs/contract/multicall.html
+    const promiseOfAll = await publicClient.multicall({
+      // TODO: Viem is complaining about the type of `contracts` here.
+      contracts: targets as any,
+    });
+
+    // TODO: Avoid casting to ReturnType. Viem is complaining, likely  because of the complexity of the types involved.
+    const results = promiseOfAll.map((promise) => {
+      if (promise.result === undefined) {
+        return ensureError(promise.error);
+      }
+
+      return promise.result;
+    }) as ReturnType;
+
+    setResults(results);
+  }, [abi, options, publicClient]);
+
+  usePolling({ effect: refresh });
+
+  return {
+    results,
+    refresh,
+  };
+};
+
+export default useContractReadBatch;
diff --git a/apps/tangle-dapp/data/liquifier/useContractReadOnce.ts b/apps/tangle-dapp/data/liquifier/useContractReadOnce.ts
new file mode 100644
index 0000000000..4182a1c74f
--- /dev/null
+++ b/apps/tangle-dapp/data/liquifier/useContractReadOnce.ts
@@ -0,0 +1,80 @@
+import { HexString } from '@polkadot/util/types';
+import assert from 'assert';
+import { useCallback } from 'react';
+import {
+  Abi as ViemAbi,
+  ContractFunctionArgs,
+  ContractFunctionName,
+} from 'viem';
+import { mainnet, sepolia } from 'viem/chains';
+import { ReadContractReturnType } from 'wagmi/actions';
+
+import { IS_PRODUCTION_ENV } from '../../constants/env';
+import useDebugMetricsStore from '../../context/useDebugMetricsStore';
+import ensureError from '../../utils/ensureError';
+import useViemPublicClientWithChain from './useViemPublicClientWithChain';
+
+export type ContractReadOptions<
+  Abi extends ViemAbi,
+  FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>,
+> = {
+  address: HexString;
+  functionName: FunctionName;
+  args: ContractFunctionArgs<Abi, 'pure' | 'view', FunctionName>;
+};
+
+const useContractReadOnce = <Abi extends ViemAbi>(abi: Abi) => {
+  const { incrementRequestCount } = useDebugMetricsStore();
+
+  // Use Sepolia testnet for development, and mainnet for production.
+  // Some dummy contracts were deployed on Sepolia for testing purposes.
+  const chain = IS_PRODUCTION_ENV ? mainnet : sepolia;
+
+  const publicClient = useViemPublicClientWithChain(chain);
+
+  const read = useCallback(
+    async <FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>>({
+      address,
+      functionName,
+      args,
+    }: ContractReadOptions<Abi, FunctionName>): Promise<
+      | ReadContractReturnType<
+          Abi,
+          FunctionName,
+          ContractFunctionArgs<Abi, 'pure' | 'view', FunctionName>
+        >
+      | Error
+    > => {
+      assert(
+        publicClient !== null,
+        "Should not be able to call this function if the client isn't ready yet",
+      );
+
+      incrementRequestCount();
+
+      try {
+        return await publicClient.readContract({
+          address,
+          abi,
+          functionName,
+          args,
+        });
+      } catch (possibleError) {
+        const error = ensureError(possibleError);
+
+        console.error(
+          `Error reading contract ${address} function ${functionName}:`,
+          error,
+        );
+
+        return error;
+      }
+    },
+    [abi, incrementRequestCount, publicClient],
+  );
+
+  // Only provide the read functions once the public client is ready.
+  return publicClient === null ? null : read;
+};
+
+export default useContractReadOnce;
diff --git a/apps/tangle-dapp/data/liquifier/useContractReadSubscription.ts b/apps/tangle-dapp/data/liquifier/useContractReadSubscription.ts
deleted file mode 100644
index 44ac4b7311..0000000000
--- a/apps/tangle-dapp/data/liquifier/useContractReadSubscription.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { PromiseOrT } from '@webb-tools/abstract-api-provider';
-import { useCallback, useState } from 'react';
-import { Abi as ViemAbi, ContractFunctionName } from 'viem';
-
-import usePolling, {
-  PollingPrimaryCacheKey,
-} from '../liquidStaking/usePolling';
-import useContractRead, { ContractReadOptions } from './useContractRead';
-
-const useContractReadSubscription = <
-  Abi extends ViemAbi,
-  FunctionName extends ContractFunctionName<Abi, 'pure' | 'view'>,
->(
-  abi: Abi,
-  options:
-    | ContractReadOptions<Abi, FunctionName>
-    // Allow consumers to provide a function that returns the options.
-    // This is useful for when the options are dependent on some state.
-    | (() => PromiseOrT<ContractReadOptions<Abi, FunctionName> | null>),
-) => {
-  const [isPaused, setIsPaused] = useState(false);
-  const read = useContractRead(abi);
-
-  const fetcher = useCallback(async () => {
-    if (isPaused || read === null) {
-      return null;
-    }
-
-    const options_ = typeof options === 'function' ? await options() : options;
-
-    if (options_ === null) {
-      return null;
-    }
-
-    const result = await read(options_);
-
-    return result instanceof Error ? null : result;
-  }, [isPaused, options, read]);
-
-  const { value, isRefreshing } = usePolling({
-    // By providing null, it signals to the hook to maintain
-    // its current value and not refresh.
-    fetcher: isPaused ? null : fetcher,
-    primaryCacheKey: PollingPrimaryCacheKey.CONTRACT_READ_SUBSCRIPTION,
-    // TODO: Options include args, which may be objects. Having these objects be stable across renders is important for the intended caching behavior. Instead of using the options object directly, consider providing the user a way to specify a cache key.
-    cacheKey: Object.values(options),
-  });
-
-  return { value, isRefreshing, isPaused, setIsPaused };
-};
-
-export default useContractReadSubscription;
diff --git a/apps/tangle-dapp/data/liquifier/useLiquifierDeposit.ts b/apps/tangle-dapp/data/liquifier/useLiquifierDeposit.ts
index 0550aba5fe..ed1aea4f33 100644
--- a/apps/tangle-dapp/data/liquifier/useLiquifierDeposit.ts
+++ b/apps/tangle-dapp/data/liquifier/useLiquifierDeposit.ts
@@ -4,9 +4,9 @@ import { useCallback } from 'react';
 import { erc20Abi } from 'viem';
 
 import { TxName } from '../../constants';
-import { LS_ERC20_TOKEN_MAP } from '../../constants/liquidStaking/constants';
+import { LS_LIQUIFIER_PROTOCOL_MAP } from '../../constants/liquidStaking/constants';
 import LIQUIFIER_ABI from '../../constants/liquidStaking/liquifierAbi';
-import { LsErc20TokenId } from '../../constants/liquidStaking/types';
+import { LsLiquifierProtocolId } from '../../constants/liquidStaking/types';
 import useEvmAddress20 from '../../hooks/useEvmAddress';
 import useContractWrite from './useContractWrite';
 
@@ -38,7 +38,7 @@ const useLiquifierDeposit = () => {
     activeEvmAddress20 !== null;
 
   const deposit = useCallback(
-    async (tokenId: LsErc20TokenId, amount: BN) => {
+    async (tokenId: LsLiquifierProtocolId, amount: BN) => {
       // TODO: Should the user balance check be done here or assume that the consumer of the hook will handle that?
 
       assert(
@@ -46,16 +46,16 @@ const useLiquifierDeposit = () => {
         'Should not be able to call this function if the requirements are not ready yet',
       );
 
-      const tokenDef = LS_ERC20_TOKEN_MAP[tokenId];
+      const tokenDef = LS_LIQUIFIER_PROTOCOL_MAP[tokenId];
 
       // TODO: Check for approval first, in case that it has already been granted. This prevents another unnecessary approval transaction (ex. if the transaction fails after the approval but before the deposit).
       // Approve spending the token amount by the Liquifier contract.
       const approveTxSucceeded = await writeChainlinkErc20({
         txName: TxName.LS_LIQUIFIER_APPROVE,
-        address: tokenDef.address,
+        address: tokenDef.erc20TokenAddress,
         functionName: 'approve',
-        args: [tokenDef.liquifierAdapterAddress, BigInt(amount.toString())],
-        notificationStep: { current: 1, max: 2 },
+        args: [tokenDef.liquifierContractAddress, BigInt(amount.toString())],
+        notificationStep: { current: 1, total: 2 },
       });
 
       if (!approveTxSucceeded) {
@@ -65,11 +65,11 @@ const useLiquifierDeposit = () => {
       const depositTxSucceeded = await writeLiquifier({
         txName: TxName.LS_LIQUIFIER_DEPOSIT,
         // TODO: Does the adapter contract have a deposit function? It doesn't seem like so. In that case, will need to update the way that Liquifier contract's address is handled.
-        address: tokenDef.liquifierAdapterAddress,
+        address: tokenDef.liquifierContractAddress,
         functionName: 'deposit',
         // TODO: Provide the first arg. (validator). Need to figure out how it works on Chainlink (vaults? single address?). See: https://github.com/webb-tools/tnt-core/blob/21c158d6cb11e2b5f50409d377431e7cd51ff72f/src/lst/adapters/ChainlinkAdapter.sol#L187
         args: [activeEvmAddress20, BigInt(amount.toString())],
-        notificationStep: { current: 2, max: 2 },
+        notificationStep: { current: 2, total: 2 },
       });
 
       return depositTxSucceeded;
diff --git a/apps/tangle-dapp/data/liquifier/useLiquifierNftUnlocks.ts b/apps/tangle-dapp/data/liquifier/useLiquifierNftUnlocks.ts
index 98e4bee3bf..90fb0e76c7 100644
--- a/apps/tangle-dapp/data/liquifier/useLiquifierNftUnlocks.ts
+++ b/apps/tangle-dapp/data/liquifier/useLiquifierNftUnlocks.ts
@@ -1,21 +1,27 @@
-import { BN } from '@polkadot/util';
+import { assert, BN } from '@polkadot/util';
 import { useCallback, useMemo } from 'react';
 import { Address } from 'viem';
 
+import { BaseUnstakeRequest } from '../../components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable';
+import { IS_PRODUCTION_ENV } from '../../constants/env';
 import LIQUIFIER_UNLOCKS_ABI from '../../constants/liquidStaking/liquifierUnlocksAbi';
-import { LsErc20TokenId } from '../../constants/liquidStaking/types';
+import { LsNetworkId } from '../../constants/liquidStaking/types';
 import useEvmAddress20 from '../../hooks/useEvmAddress';
 import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
-import { ContractReadOptions } from './useContractRead';
-import useContractReadSubscription from './useContractReadSubscription';
+import { useLsStore } from '../liquidStaking/useLsStore';
+import useContractRead from './useContractRead';
+import useContractReadBatch, {
+  ContractReadOptionsBatch,
+} from './useContractReadBatch';
+import { ContractReadOptions } from './useContractReadOnce';
 
 /**
  * Represents the metadata of an ERC-721 NFT liquifier unlock request.
  *
  * See: https://github.com/webb-tools/tnt-core/blob/21c158d6cb11e2b5f50409d377431e7cd51ff72f/src/lst/unlocks/Unlocks.sol#L21
  */
-export type LiquifierUnlockNft = {
-  unlockId: number;
+export type LiquifierUnlockNftMetadata = BaseUnstakeRequest & {
+  type: 'liquifierUnlockNft';
   symbol: string;
   name: string;
   validator: Address;
@@ -26,12 +32,6 @@ export type LiquifierUnlockNft = {
    */
   progress: number;
 
-  /**
-   * The underlying stake tokens amount represented by the unlock
-   * request.
-   */
-  amount: BN;
-
   /**
    * A timestamp representing the date at which the unlock request
    * can be fulfilled.
@@ -47,95 +47,119 @@ export type LiquifierUnlockNft = {
  * including the progress of the unlock request, the amount of underlying
  * stake tokens, and the maturity timestamp.
  */
-const useLiquifierNftUnlocks = (
-  tokenId: LsErc20TokenId,
-): LiquifierUnlockNft[] | null => {
+const useLiquifierNftUnlocks = (): LiquifierUnlockNftMetadata[] | null => {
+  const { selectedProtocolId } = useLsStore();
   const activeEvmAddress20 = useEvmAddress20();
 
-  // const getUnlockIdCountOptions = useCallback((): ContractReadOptions<
-  //   typeof LIQUIFIER_UNLOCKS_ABI,
-  //   'balanceOf'
-  // > | null => {
-  //   if (activeEvmAddress20 === null) {
-  //     return null;
-  //   }
-
-  //   const protocol = getLsProtocolDef(tokenId);
-
-  //   return {
-  //     // TODO: This should be something like 'unlockAddress', defined per-protocol. For now, just use the protocol address as a placeholder.
-  //     address: protocol.address,
-  //     functionName: 'balanceOf',
-  //     args: [activeEvmAddress20],
-  //   };
-  // }, [activeEvmAddress20, tokenId]);
-
-  // const { value: rawUnlockIdCount } = useContractReadSubscription(
-  //   LIQUIFIER_UNLOCKS_ABI,
-  //   getUnlockIdCountOptions,
-  // );
-
-  // const _unlockIds = useMemo(() => {
-  //   if (rawUnlockIdCount === null) {
-  //     return null;
-  //   }
-
-  //   const ids = [];
-
-  //   // TODO: Since this is a `balanceOf` operation, might need to shrink it down to base unit, since it's likely in the underlying token's decimals, which is very big, causing JavaScript to throw an `invalid array length` error. Also, for now made the upper bound be `0`, it should be `rawUnlockIdCount`, but it was erroring since it's not yet implemented.
-  //   for (let i = 0; i < 0; i++) {
-  //     ids.push(i);
-  //   }
-
-  //   return ids;
-  // }, [rawUnlockIdCount]);
-
-  // TODO: Need to page/lazy load this, since there could be many unlock requests. Then, paging would be handled by the parent table component. Perhaps try to add the lazy loading functionality directly into the `useContractReadSubscription` hook (e.g. multi-arg fetch capability + paging options & state).
-  const getMetadataOptions = useCallback((): ContractReadOptions<
+  const protocol = getLsProtocolDef(selectedProtocolId);
+
+  const getUnlockIdCountOptions = useCallback((): ContractReadOptions<
+    typeof LIQUIFIER_UNLOCKS_ABI,
+    'balanceOf'
+  > | null => {
+    if (
+      activeEvmAddress20 === null ||
+      protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER
+    ) {
+      return null;
+    }
+
+    return {
+      address: protocol.unlocksContractAddress,
+      functionName: 'balanceOf',
+      args: [activeEvmAddress20],
+    };
+  }, [activeEvmAddress20, protocol]);
+
+  const { value: rawUnlockIdCount } = useContractRead(
+    LIQUIFIER_UNLOCKS_ABI,
+    getUnlockIdCountOptions,
+  );
+
+  const unlockIds = useMemo(() => {
+    if (rawUnlockIdCount === null || rawUnlockIdCount instanceof Error) {
+      return null;
+    }
+
+    // Extremely unlikely that the user would have this many unlock
+    // requests, but just in case.
+    assert(
+      rawUnlockIdCount <= Number.MAX_SAFE_INTEGER,
+      'Unlock ID count exceeds maximum safe integer, user seems to have an unreasonable amount of unlock requests',
+    );
+
+    const unlockIdCount = Number(rawUnlockIdCount);
+
+    return Array.from<bigint>({
+      length: unlockIdCount,
+    }).map((_, i) => BigInt(i));
+  }, [rawUnlockIdCount]);
+
+  const getMetadataOptions = useCallback((): ContractReadOptionsBatch<
     typeof LIQUIFIER_UNLOCKS_ABI,
     'getMetadata'
   > | null => {
-    // Do not fetch if there's no active EVM account.
-    if (activeEvmAddress20 === null) {
+    if (
+      // Do not fetch if there's no active EVM account.
+      activeEvmAddress20 === null ||
+      protocol.networkId !== LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER ||
+      unlockIds === null
+    ) {
       return null;
     }
 
-    const protocol = getLsProtocolDef(tokenId);
+    const batchArgs = unlockIds.map((unlockId) => [BigInt(unlockId)] as const);
 
     return {
-      // TODO: This should be something like 'unlockAddress', defined per-protocol. For now, just use the protocol address as a placeholder.
-      address: protocol.address,
+      address: protocol.unlocksContractAddress,
       functionName: 'getMetadata',
-      // TODO: Using index 0 for now, until paging is implemented.
-      // TODO: Consider adding support for an array of args, which would be interpreted as a multi-fetch by `useContractReadSubscription`.
-      args: [BigInt(0)],
+      args: batchArgs,
     };
-  }, [activeEvmAddress20, tokenId]);
+  }, [activeEvmAddress20, protocol, unlockIds]);
 
-  const { value: rawMetadata } = useContractReadSubscription(
+  const { results: rawMetadatas } = useContractReadBatch(
     LIQUIFIER_UNLOCKS_ABI,
     getMetadataOptions,
   );
 
-  const metadata = useMemo<LiquifierUnlockNft[] | null>(() => {
-    if (rawMetadata === null) {
+  const metadatas = useMemo<LiquifierUnlockNftMetadata[] | null>(() => {
+    if (rawMetadatas === null) {
       return null;
     }
 
-    return [
-      {
-        unlockId: Number(rawMetadata.unlockId),
-        symbol: rawMetadata.symbol,
-        name: rawMetadata.name,
-        validator: rawMetadata.validator,
-        progress: Number(rawMetadata.progress) / 100,
-        amount: new BN(rawMetadata.amount.toString()),
-        maturityTimestamp: Number(rawMetadata.maturity),
-      },
-    ];
-  }, [rawMetadata]);
-
-  return metadata;
+    return rawMetadatas.flatMap((metadata, index) => {
+      // Ignore failed metadata fetches and those that are still loading.
+      if (metadata === null || metadata instanceof Error) {
+        return [];
+      }
+
+      // The Sepolia development contract always returns 0 for the
+      // unlock ID. Use the index number to differentiate between
+      // different unlock requests.
+      const unlockId = IS_PRODUCTION_ENV ? Number(metadata.unlockId) : index;
+
+      // On development, mark some as completed for testing purposes.
+      const progress = IS_PRODUCTION_ENV
+        ? Number(metadata.progress) / 100
+        : index < 10
+          ? 1
+          : 0.6123;
+
+      return {
+        type: 'liquifierUnlockNft',
+        decimals: protocol.decimals,
+        unlockId,
+        symbol: metadata.symbol,
+        name: metadata.name,
+        validator: metadata.validator,
+        progress,
+        amount: new BN(metadata.amount.toString()),
+        maturityTimestamp: Number(metadata.maturity),
+      } satisfies LiquifierUnlockNftMetadata;
+    });
+  }, [protocol.decimals, rawMetadatas]);
+
+  return metadatas;
 };
 
 export default useLiquifierNftUnlocks;
diff --git a/apps/tangle-dapp/data/liquifier/useLiquifierUnlock.ts b/apps/tangle-dapp/data/liquifier/useLiquifierUnlock.ts
index 43d3ec7c52..cf7dcb3171 100644
--- a/apps/tangle-dapp/data/liquifier/useLiquifierUnlock.ts
+++ b/apps/tangle-dapp/data/liquifier/useLiquifierUnlock.ts
@@ -3,9 +3,9 @@ import assert from 'assert';
 import { useCallback } from 'react';
 
 import { TxName } from '../../constants';
-import { LS_ERC20_TOKEN_MAP } from '../../constants/liquidStaking/constants';
+import { LS_LIQUIFIER_PROTOCOL_MAP } from '../../constants/liquidStaking/constants';
 import LIQUIFIER_ABI from '../../constants/liquidStaking/liquifierAbi';
-import { LsErc20TokenId } from '../../constants/liquidStaking/types';
+import { LsLiquifierProtocolId } from '../../constants/liquidStaking/types';
 import useEvmAddress20 from '../../hooks/useEvmAddress';
 import useContractWrite from './useContractWrite';
 
@@ -16,7 +16,7 @@ const useLiquifierUnlock = () => {
   const isReady = writeLiquifier !== null && activeEvmAddress20 !== null;
 
   const unlock = useCallback(
-    async (tokenId: LsErc20TokenId, amount: BN): Promise<boolean> => {
+    async (tokenId: LsLiquifierProtocolId, amount: BN): Promise<boolean> => {
       // TODO: Should the user balance check be done here or assume that the consumer of the hook will handle that?
 
       assert(
@@ -24,12 +24,12 @@ const useLiquifierUnlock = () => {
         'Should not be able to call this function if the requirements are not ready yet',
       );
 
-      const tokenDef = LS_ERC20_TOKEN_MAP[tokenId];
+      const tokenDef = LS_LIQUIFIER_PROTOCOL_MAP[tokenId];
 
       return writeLiquifier({
         txName: TxName.LS_LIQUIFIER_UNLOCK,
         // TODO: Does the adapter contract have a unlock function? It doesn't seem like so. In that case, will need to update the way that Liquifier contract's address is handled.
-        address: tokenDef.liquifierAdapterAddress,
+        address: tokenDef.liquifierContractAddress,
         functionName: 'unlock',
         args: [BigInt(amount.toString())],
       });
diff --git a/apps/tangle-dapp/data/liquifier/useLiquifierWithdraw.ts b/apps/tangle-dapp/data/liquifier/useLiquifierWithdraw.ts
new file mode 100644
index 0000000000..452b4b813b
--- /dev/null
+++ b/apps/tangle-dapp/data/liquifier/useLiquifierWithdraw.ts
@@ -0,0 +1,52 @@
+import assert from 'assert';
+import { useCallback } from 'react';
+
+import { TxName } from '../../constants';
+import { LS_LIQUIFIER_PROTOCOL_MAP } from '../../constants/liquidStaking/constants';
+import LIQUIFIER_ABI from '../../constants/liquidStaking/liquifierAbi';
+import { LsLiquifierProtocolId } from '../../constants/liquidStaking/types';
+import useEvmAddress20 from '../../hooks/useEvmAddress';
+import { NotificationSteps } from '../../hooks/useTxNotification';
+import useContractWrite from './useContractWrite';
+
+const useLiquifierWithdraw = () => {
+  const activeEvmAddress20 = useEvmAddress20();
+  const writeLiquifier = useContractWrite(LIQUIFIER_ABI);
+
+  const isReady = writeLiquifier !== null && activeEvmAddress20 !== null;
+
+  const withdraw = useCallback(
+    async (
+      tokenId: LsLiquifierProtocolId,
+      unlockId: number,
+      notificationStep?: NotificationSteps,
+    ) => {
+      // TODO: Should the user balance check be done here or assume that the consumer of the hook will handle that?
+
+      assert(
+        isReady,
+        'Should not be able to call this function if the requirements are not ready yet',
+      );
+
+      const tokenDef = LS_LIQUIFIER_PROTOCOL_MAP[tokenId];
+
+      const withdrawTxSucceeded = await writeLiquifier({
+        txName: TxName.LS_LIQUIFIER_WITHDRAW,
+        // TODO: Does the adapter contract have a deposit function? It doesn't seem like so. In that case, will need to update the way that Liquifier contract's address is handled.
+        address: tokenDef.liquifierContractAddress,
+        functionName: 'withdraw',
+        args: [activeEvmAddress20, BigInt(unlockId)],
+        notificationStep,
+      });
+
+      return withdrawTxSucceeded;
+    },
+    [activeEvmAddress20, isReady, writeLiquifier],
+  );
+
+  // Wait for the requirements to be ready before
+  // returning the withdraw function.
+  return !isReady ? null : withdraw;
+};
+
+export default useLiquifierWithdraw;
diff --git a/apps/tangle-dapp/data/payouts/usePayoutAllTx.ts b/apps/tangle-dapp/data/payouts/usePayoutAllTx.ts
index df91bbcc88..5b8f061598 100644
--- a/apps/tangle-dapp/data/payouts/usePayoutAllTx.ts
+++ b/apps/tangle-dapp/data/payouts/usePayoutAllTx.ts
@@ -49,6 +49,7 @@ const usePayoutAllTx = () => {
         },
       );
 
+      // TODO: Will need to split tx into multiple batch calls if there are too many, this is because it will otherwise fail with "1010: Invalid Transaction: Transaction would exhaust the block limits," due to the block weight limit.
       return optimizeTxBatch(api, txs);
     }, []);
 
diff --git a/apps/tangle-dapp/hooks/useInputAmount.ts b/apps/tangle-dapp/hooks/useInputAmount.ts
index 00c015b291..90fac09daf 100644
--- a/apps/tangle-dapp/hooks/useInputAmount.ts
+++ b/apps/tangle-dapp/hooks/useInputAmount.ts
@@ -94,6 +94,7 @@ const useInputAmount = ({
         return;
       }
 
+      // TODO: Format the new amount string to include commas. Use `INPUT_AMOUNT_FORMAT`.
       setDisplayAmount(cleanAmountString);
 
       const amountOrError = safeParseInputAmount({
@@ -131,7 +132,12 @@ const useInputAmount = ({
 
   const setDisplayAmount_ = useCallback(
     (amount: BN) => {
-      setDisplayAmount(formatBn(amount, decimals, INPUT_AMOUNT_FORMAT));
+      setDisplayAmount(
+        formatBn(amount, decimals, {
+          ...INPUT_AMOUNT_FORMAT,
+          includeCommas: false,
+        }),
+      );
     },
     [decimals],
   );
diff --git a/apps/tangle-dapp/hooks/useLocalStorage.ts b/apps/tangle-dapp/hooks/useLocalStorage.ts
index 024c3fb670..ae4b9e110e 100644
--- a/apps/tangle-dapp/hooks/useLocalStorage.ts
+++ b/apps/tangle-dapp/hooks/useLocalStorage.ts
@@ -8,8 +8,8 @@ import { BridgeQueueTxItem } from '../types/bridge';
 import {
   Collator,
   Dapp,
+  PhalaVaultOrStakePool,
   Validator,
-  VaultOrStakePool,
 } from '../types/liquidStaking';
 import Optional from '../utils/Optional';
 
@@ -36,7 +36,7 @@ export type PayoutsCache = {
 };
 
 export type LiquidStakingTableData = {
-  [chain: string]: Validator[] | VaultOrStakePool[] | Dapp[] | Collator[];
+  [chain: string]: Validator[] | PhalaVaultOrStakePool[] | Dapp[] | Collator[];
 };
 
 export type SubstrateWalletsMetadataEntry = {
diff --git a/apps/tangle-dapp/hooks/useTxNotification.tsx b/apps/tangle-dapp/hooks/useTxNotification.tsx
index bd787978c7..1096540343 100644
--- a/apps/tangle-dapp/hooks/useTxNotification.tsx
+++ b/apps/tangle-dapp/hooks/useTxNotification.tsx
@@ -35,6 +35,7 @@ const SUCCESS_MESSAGES: Record<TxName, string> = {
   [TxName.LS_LIQUIFIER_DEPOSIT]: 'Liquifier deposit successful',
   [TxName.LS_LIQUIFIER_APPROVE]: 'Liquifier approval successful',
   [TxName.LS_LIQUIFIER_UNLOCK]: 'Liquifier unlock successful',
+  [TxName.LS_LIQUIFIER_WITHDRAW]: 'Liquifier withdrawal successful',
 };
 
 const makeKey = (txName: TxName): `${TxName}-tx-notification` =>
@@ -42,7 +43,7 @@ const makeKey = (txName: TxName): `${TxName}-tx-notification` =>
 
 export type NotificationSteps = {
   current: number;
-  max: number;
+  total: number;
 };
 
 // TODO: Use a ref for the key to permit multiple rapid fire transactions from stacking under the same key. Otherwise, use a global state counter via Zustand.
@@ -133,7 +134,7 @@ const useTxNotification = (explorerUrl?: string) => {
   const notifyProcessing = useCallback(
     (txName: TxName, steps?: NotificationSteps) => {
       // Sanity check.
-      if (steps !== undefined && steps.current > steps.max) {
+      if (steps !== undefined && steps.current > steps.total) {
         console.warn(
           'Current transaction notification steps exceed the maximum steps (check for off-by-one errors)',
         );
@@ -145,8 +146,8 @@ const useTxNotification = (explorerUrl?: string) => {
 
       enqueueSnackbar(
         <Typography variant="h5">
-          {steps !== undefined && `(${steps.current}/${steps.max}) `}Processing{' '}
-          {txName}
+          {steps !== undefined && `(${steps.current}/${steps.total}) `}
+          Processing {txName}
         </Typography>,
         {
           key,
diff --git a/apps/tangle-dapp/types/liquidStaking.ts b/apps/tangle-dapp/types/liquidStaking.ts
index 4a086feae9..7e48666029 100644
--- a/apps/tangle-dapp/types/liquidStaking.ts
+++ b/apps/tangle-dapp/types/liquidStaking.ts
@@ -23,7 +23,7 @@ export type Validator = {
 } & StakingItem;
 
 // Chain - Phala Network (Stake on Vaults or Stake Pools)
-export type VaultOrStakePool = {
+export type PhalaVaultOrStakePool = {
   vaultOrStakePoolID: string;
   vaultOrStakePoolName: string;
   vaultOrStakePoolAccountID: string;
@@ -55,7 +55,7 @@ export enum LiquidStakingItem {
 
 export type LiquidStakingItemType =
   | Validator
-  | VaultOrStakePool
+  | PhalaVaultOrStakePool
   | Dapp
   | Collator;
 
diff --git a/apps/tangle-dapp/utils/assertSubstrateAddress.ts b/apps/tangle-dapp/utils/assertSubstrateAddress.ts
new file mode 100644
index 0000000000..615daedf5c
--- /dev/null
+++ b/apps/tangle-dapp/utils/assertSubstrateAddress.ts
@@ -0,0 +1,18 @@
+import { isAddress } from '@polkadot/util-crypto';
+import assert from 'assert';
+
+import { SubstrateAddress } from '../types/utils';
+
+const assertSubstrateAddress = <SS58 extends number>(
+  address: string,
+  ss58Prefix: SS58,
+): SubstrateAddress<SS58> => {
+  assert(
+    isAddress(address, undefined, ss58Prefix),
+    'Address should be a valid Substrate address',
+  );
+
+  return address as SubstrateAddress<SS58>;
+};
+
+export default assertSubstrateAddress;
diff --git a/apps/tangle-dapp/utils/formatBn.ts b/apps/tangle-dapp/utils/formatBn.ts
index 5a32174257..a6c233a744 100644
--- a/apps/tangle-dapp/utils/formatBn.ts
+++ b/apps/tangle-dapp/utils/formatBn.ts
@@ -34,14 +34,18 @@ function formatBn(
   decimals: number,
   options?: Partial<FormatOptions>,
 ): string {
-  const finalOptions = { ...DEFAULT_FORMAT_OPTIONS, ...options };
+  const finalOptions: FormatOptions = { ...DEFAULT_FORMAT_OPTIONS, ...options };
   const chainUnitFactorBn = getChainUnitFactor(decimals);
+  const isNegative = amount.isNeg();
+
+  // There's a weird bug with BN.js, so need to create a new BN
+  // instance here for the amount, to avoid a strange error.
+  const integerPartBn = new BN(amount.toString()).div(chainUnitFactorBn);
 
-  const integerPartBn = new BN(amount).div(chainUnitFactorBn);
   const remainderBn = amount.mod(chainUnitFactorBn);
 
-  let integerPart = integerPartBn.toString(10);
-  let fractionPart = remainderBn.toString(10).padStart(decimals, '0');
+  let integerPart = integerPartBn.abs().toString(10);
+  let fractionPart = remainderBn.abs().toString(10).padStart(decimals, '0');
 
   const amountStringLength = amount.toString().length;
   const partsLength = integerPart.length + fractionPart.length;
@@ -87,9 +91,13 @@ function formatBn(
     integerPart = addCommasToNumber(integerPart);
   }
 
+  const polarity = isNegative ? '-' : '';
+
   // Combine the integer and fraction parts. Only include the fraction
   // part if it's available.
-  return fractionPart !== '' ? `${integerPart}.${fractionPart}` : integerPart;
+  return fractionPart !== ''
+    ? `${polarity}${integerPart}.${fractionPart}`
+    : `${polarity}${integerPart}`;
 }
 
 export default formatBn;
diff --git a/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts b/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts
new file mode 100644
index 0000000000..811ebc96a3
--- /dev/null
+++ b/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts
@@ -0,0 +1,16 @@
+import {
+  LS_ETHEREUM_MAINNET_LIQUIFIER,
+  LS_TANGLE_RESTAKING_PARACHAIN,
+} from '../../constants/liquidStaking/constants';
+import { LsNetwork, LsNetworkId } from '../../constants/liquidStaking/types';
+
+const getLsNetwork = (networkId: LsNetworkId): LsNetwork => {
+  switch (networkId) {
+    case LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER:
+      return LS_ETHEREUM_MAINNET_LIQUIFIER;
+    case LsNetworkId.TANGLE_RESTAKING_PARACHAIN:
+      return LS_TANGLE_RESTAKING_PARACHAIN;
+  }
+};
+
+export default getLsNetwork;
diff --git a/apps/tangle-dapp/utils/liquidStaking/getLsProtocolDef.ts b/apps/tangle-dapp/utils/liquidStaking/getLsProtocolDef.ts
index 63d4d90201..685d7f8520 100644
--- a/apps/tangle-dapp/utils/liquidStaking/getLsProtocolDef.ts
+++ b/apps/tangle-dapp/utils/liquidStaking/getLsProtocolDef.ts
@@ -2,7 +2,7 @@ import assert from 'assert';
 
 import { LS_PROTOCOLS } from '../../constants/liquidStaking/constants';
 import {
-  LsErc20TokenDef,
+  LsLiquifierProtocolDef,
   LsParachainChainDef,
   LsParachainChainId,
   LsProtocolId,
@@ -10,7 +10,7 @@ import {
 
 type IdToDefMap<T extends LsProtocolId> = T extends LsParachainChainId
   ? LsParachainChainDef
-  : LsErc20TokenDef;
+  : LsLiquifierProtocolDef;
 
 const getLsProtocolDef = <T extends LsProtocolId>(id: T): IdToDefMap<T> => {
   const result = LS_PROTOCOLS.find((def) => def.id === id);
diff --git a/apps/tangle-dapp/utils/liquidStaking/isLiquifierProtocolId.ts b/apps/tangle-dapp/utils/liquidStaking/isLiquifierProtocolId.ts
new file mode 100644
index 0000000000..1917fbf6b6
--- /dev/null
+++ b/apps/tangle-dapp/utils/liquidStaking/isLiquifierProtocolId.ts
@@ -0,0 +1,10 @@
+import { LS_LIQUIFIER_PROTOCOL_IDS } from '../../constants/liquidStaking/constants';
+import { LsLiquifierProtocolId } from '../../constants/liquidStaking/types';
+
+function isLiquifierProtocolId(
+  protocolId: number,
+): protocolId is LsLiquifierProtocolId {
+  return LS_LIQUIFIER_PROTOCOL_IDS.includes(protocolId);
+}
+
+export default isLiquifierProtocolId;
diff --git a/apps/tangle-dapp/utils/liquidStaking/isLsErc20TokenId.ts b/apps/tangle-dapp/utils/liquidStaking/isLsErc20TokenId.ts
deleted file mode 100644
index da6c31f566..0000000000
--- a/apps/tangle-dapp/utils/liquidStaking/isLsErc20TokenId.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { LS_ERC20_TOKEN_IDS } from '../../constants/liquidStaking/constants';
-import { LsErc20TokenId } from '../../constants/liquidStaking/types';
-
-function isLsErc20TokenId(tokenId: number): tokenId is LsErc20TokenId {
-  return LS_ERC20_TOKEN_IDS.includes(tokenId);
-}
-
-export default isLsErc20TokenId;
diff --git a/apps/tangle-dapp/utils/liquidStaking/stringifyTimeUnit.ts b/apps/tangle-dapp/utils/liquidStaking/stringifyTimeUnit.ts
index 5acddb8efd..212761036c 100644
--- a/apps/tangle-dapp/utils/liquidStaking/stringifyTimeUnit.ts
+++ b/apps/tangle-dapp/utils/liquidStaking/stringifyTimeUnit.ts
@@ -1,7 +1,7 @@
-import { LsSimpleParachainTimeUnit } from '../../constants/liquidStaking/types';
+import { LsParachainSimpleTimeUnit } from '../../constants/liquidStaking/types';
 
 const stringifyTimeUnit = (
-  timeUnit: LsSimpleParachainTimeUnit,
+  timeUnit: LsParachainSimpleTimeUnit,
 ): [number, string] => {
   const plurality = timeUnit.value === 1 ? '' : 's';
 
diff --git a/apps/tangle-dapp/utils/liquidStaking/tangleTimeUnitToSimpleInstance.ts b/apps/tangle-dapp/utils/liquidStaking/tangleTimeUnitToSimpleInstance.ts
index 819139d7c9..2dfedc47a5 100644
--- a/apps/tangle-dapp/utils/liquidStaking/tangleTimeUnitToSimpleInstance.ts
+++ b/apps/tangle-dapp/utils/liquidStaking/tangleTimeUnitToSimpleInstance.ts
@@ -1,11 +1,11 @@
 import { TanglePrimitivesTimeUnit } from '@polkadot/types/lookup';
 
-import { LsSimpleParachainTimeUnit } from '../../constants/liquidStaking/types';
+import { LsParachainSimpleTimeUnit } from '../../constants/liquidStaking/types';
 import getValueOfTangleTimeUnit from './getValueOfTangleTimeUnit';
 
 const tangleTimeUnitToSimpleInstance = (
   tangleTimeUnit: TanglePrimitivesTimeUnit,
-): LsSimpleParachainTimeUnit => {
+): LsParachainSimpleTimeUnit => {
   return {
     unit: tangleTimeUnit.type,
     value: getValueOfTangleTimeUnit(tangleTimeUnit),