refactor(tangle-dapp): Integrate bridge ERC-20 tokens into restaking

apps/tangle-dapp/src/components/ErrorMessage.tsx

@@ -23,15 +23,12 @@ export default function ErrorMessage({
     <p
       {...props}
       className={twMerge(
-        'flex items-start gap-2 text-red-70 dark:text-red-50',
+        'flex items-center justify-center gap-0.5 text-red-70 dark:text-red-50 mt-2 ml-2',
         className,
       )}
     >
       {isDefined(children) ? (
-        <InformationLine
-          size="md"
-          className="fill-current dark:fill-current mt-1 shrink-0"
-        />
+        <InformationLine size="md" className="fill-current dark:fill-current" />
       ) : null}
 
       <Typography

apps/tangle-dapp/src/components/StatItem.tsx

@@ -19,7 +19,7 @@ const StatItem: FC<StatItemProps> = ({
 
   return (
     <div className={className}>
-      <Typography className="dark:text-mono-0" variant="body1" fw="bold">
+      <Typography className="dark:text-mono-0" variant="body1">
         {title}
       </Typography>
 

apps/tangle-dapp/src/components/bridge/BridgeConfirmationModal.tsx

@@ -30,11 +30,6 @@ import useWalletClient from '../../data/bridge/useWalletClient';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
 import { FeeDetail, FeeDetailProps } from './FeeDetail';
-import {
-  ROUTER_TX_EXPLORER_URL,
-  ROUTER_TX_STATUS_URL,
-  mailboxAddress,
-} from '../../constants/bridge';
 import useBridgeTxQueue from '../../context/bridge/BridgeTxQueueContext/useBridgeTxQueue';
 import { useHyperlaneTransfer } from '../../data/bridge/useHyperlaneTransfer';
 import { useRouterTransfer } from '../../data/bridge/useRouterTransfer';
@@ -47,6 +42,11 @@ import { EVMChainId } from '@webb-tools/dapp-types/ChainId';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 import { ArrowDownIcon } from '@webb-tools/icons';
 import axios from 'axios';
+import {
+  mailboxAddress,
+  ROUTER_TX_EXPLORER_URL,
+  ROUTER_TX_STATUS_URL,
+} from '@webb-tools/tangle-shared-ui/constants/bridge';
 import useIsBridgeNativeToken from '../../hooks/useIsBridgeNativeToken';
 import useLocalStorage, {
   LocalStorageKey,
@@ -489,7 +489,7 @@ export const BridgeConfirmationModal = ({
           options: {
             address: token.address,
             decimals: token.decimals,
-            symbol: token.tokenSymbol,
+            symbol: token.symbol,
           },
         });
 
@@ -507,12 +507,12 @@ export const BridgeConfirmationModal = ({
           });
 
           notificationApi({
-            message: `${token.tokenSymbol} was successfully added to your wallet`,
+            message: `${token.symbol} was successfully added to your wallet`,
             variant: 'success',
           });
         } else {
           notificationApi({
-            message: `Failed to add ${token.tokenSymbol} to your wallet`,
+            message: `Failed to add ${token.symbol} to your wallet`,
             variant: 'error',
           });
         }
@@ -536,7 +536,7 @@ export const BridgeConfirmationModal = ({
     token.address,
     token.tokenType,
     token.decimals,
-    token.tokenSymbol,
+    token.symbol,
     handleClose,
     clearBridgeStore,
     cachedTokensToAcc?.value,

apps/tangle-dapp/src/containers/DebugMetrics.tsx

@@ -8,8 +8,6 @@ import {
 import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useEffect, useState } from 'react';
 
-import useDebugMetricsStore from '../context/useDebugMetricsStore';
-
 /**
  * Format bytes to megabytes, rounded to two decimal places
  * and suffixed with `mb`.
@@ -23,8 +21,7 @@ function formatBytes(bytes: number): string {
 
 const DebugMetrics: FC = () => {
   const [isCollapsed, setIsCollapsed] = useState(true);
-  const { rpcEndpoint } = useNetworkStore();
-  const { requestCount, subscriptionCount } = useDebugMetricsStore();
+  const rpcEndpoint = useNetworkStore((store) => store.network.wsRpcEndpoint);
 
   const { result: api } = usePromise(
     useCallback(() => getApiPromise(rpcEndpoint), [rpcEndpoint]),
@@ -40,9 +37,7 @@ const DebugMetrics: FC = () => {
   const [tick, setTick] = useState(0);
 
   const totalRequests =
-    (api?.stats?.total.requests ?? 0) +
-    (apiRx?.stats?.total.requests ?? 0) +
-    requestCount;
+    (api?.stats?.total.requests ?? 0) + (apiRx?.stats?.total.requests ?? 0);
 
   const totalBytesReceived =
     (api?.stats?.total.bytesRecv ?? 0) + (apiRx?.stats?.total.bytesRecv ?? 0);
@@ -55,8 +50,7 @@ const DebugMetrics: FC = () => {
 
   const totalActiveSubscriptions =
     (api?.stats?.active.subscriptions ?? 0) +
-    (apiRx?.stats?.active.subscriptions ?? 0) +
-    subscriptionCount;
+    (apiRx?.stats?.active.subscriptions ?? 0);
 
   // Manually trigger a re-render every second, since the stats
   // are not automatically updated.

apps/tangle-dapp/src/containers/VaultsAndBalancesTable.tsx

@@ -17,6 +17,7 @@ import {
   CircularProgress,
   EMPTY_VALUE_PLACEHOLDER,
   formatDisplayAmount,
+  InfoIconWithTooltip,
   isEvmAddress,
   Table,
   Typography,
@@ -57,8 +58,10 @@ type Row = {
   tvlInUsd?: number;
   available: BN;
   availableInUsd?: number;
-  locked: BN;
-  lockedInUsd?: number;
+  deposited: BN;
+  depositedInUsd?: number;
+  delegated: BN;
+  delegatedInUsd?: number;
   points?: number;
   decimals: number;
   apyPercentage?: number;
@@ -119,24 +122,34 @@ const COLUMNS = [
       );
     },
   }),
-  COLUMN_HELPER.accessor('locked', {
+  COLUMN_HELPER.accessor('deposited', {
     header: () => 'Deposits',
-    sortingFn: sortByBn((row) => row.locked),
+    sortingFn: sortByBn((row) => row.deposited),
     cell: (props) => {
-      const fmtLocked = formatDisplayAmount(
-        props.getValue(),
+      const fmtDeposited = formatDisplayAmount(
+        props.row.original.deposited,
         props.row.original.decimals,
         AmountFormatStyle.SHORT,
       );
 
-      const subtitle =
-        props.row.original.lockedInUsd === undefined
-          ? undefined
-          : `$${props.row.original.lockedInUsd}`;
+      const fmtDelegated = formatDisplayAmount(
+        props.row.original.delegated,
+        props.row.original.decimals,
+        AmountFormatStyle.SHORT,
+      );
 
       return (
         <TableCellWrapper>
-          <StatItem title={fmtLocked} subtitle={subtitle} removeBorder />
+          <Typography
+            variant="body1"
+            className="flex gap-1 items-center justify-center dark:text-mono-0"
+          >
+            {fmtDeposited}
+
+            <InfoIconWithTooltip
+              content={`${fmtDelegated}/${fmtDeposited} delegated`}
+            />
+          </Typography>
         </TableCellWrapper>
       );
     },
@@ -188,7 +201,7 @@ const COLUMNS = [
               />
             )}
 
-            <Typography variant="body1">
+            <Typography variant="body1" className="dark:text-mono-0">
               {fmtTvl === undefined
                 ? `${fmtDepositCap}`
                 : `${fmtTvl} | ${fmtDepositCap}`}
@@ -255,15 +268,15 @@ const VaultsAndBalancesTable: FC = () => {
   const isAccountConnected = useIsAccountConnected();
 
   const assetsTvl = useRestakeAssetsTvl();
-  const erc20Balances = useTangleEvmErc20Balances();
+  const { data: erc20Balances } = useTangleEvmErc20Balances();
 
   const {
     vaults,
     balances: customAssetBalances,
     isLoading,
   } = useRestakeContext();
 
-  const getTotalLockedInAsset = useCallback(
+  const getAssetTvl = useCallback(
     (assetId: RestakeAssetId) => {
       const deposits = delegatorInfo?.deposits ?? {};
       const deposit = get(deposits, assetId);
@@ -274,23 +287,14 @@ const VaultsAndBalancesTable: FC = () => {
 
       const depositAmount = deposit.amount;
 
-      const delegation = delegatorInfo?.delegations.find((delegation) => {
-        return delegation.assetId === assetId.toString();
-      });
-
       const depositAmountBn =
         depositAmount === undefined
           ? BN_ZERO
           : new BN(depositAmount.toString());
 
-      const delegationBn =
-        delegation === undefined
-          ? BN_ZERO
-          : new BN(delegation.amountBonded.toString());
-
-      return depositAmountBn.add(delegationBn);
+      return depositAmountBn;
     },
-    [delegatorInfo?.delegations, delegatorInfo?.deposits],
+    [delegatorInfo?.deposits],
   );
 
   const vaultRows = useMemo<Row[]>(() => {
@@ -315,7 +319,8 @@ const VaultsAndBalancesTable: FC = () => {
           ? undefined
           : new BN(config.depositCap.toString());
 
-      const tvl = assetsTvl === null ? undefined : assetsTvl.get(assetId);
+      const delegated =
+        (assetsTvl === null ? undefined : assetsTvl.get(assetId)) ?? BN_ZERO;
 
       const assetBalances:
         | (typeof customAssetBalances)[RestakeAssetId]
@@ -334,12 +339,17 @@ const VaultsAndBalancesTable: FC = () => {
         }
       })();
 
+      const deposits = delegatorInfo?.deposits ?? {};
+      const depositedBigInt = get(deposits, assetId)?.amount ?? BigInt(0);
+      const deposited = new BN(depositedBigInt.toString());
+
       return {
         vaultId: metadata.vaultId,
         name: metadata.name,
-        tvl,
+        tvl: getAssetTvl(assetId),
         available,
-        locked: getTotalLockedInAsset(assetId),
+        deposited,
+        delegated,
         // TODO: This won't work because reward config is PER VAULT not PER ASSET. But isn't each asset its own vault?
         apyPercentage,
         tokenSymbol: metadata.symbol,
@@ -353,7 +363,8 @@ const VaultsAndBalancesTable: FC = () => {
     rewardConfig,
     assetsTvl,
     customAssetBalances,
-    getTotalLockedInAsset,
+    delegatorInfo?.deposits,
+    getAssetTvl,
     erc20Balances,
   ]);
 

apps/tangle-dapp/src/containers/bridge/BridgeContainer.tsx

@@ -35,7 +35,6 @@ import { BridgeConfirmationModal } from '../../components/bridge/BridgeConfirmat
 import { FeeDetail, FeeDetailProps } from '../../components/bridge/FeeDetail';
 import { AssetConfig, AssetList } from '../../components/Lists/AssetList';
 import { ChainList } from '../../components/Lists/ChainList';
-import { ROUTER_NATIVE_TOKEN_ADDRESS } from '../../constants/bridge';
 import useBridgeStore from '../../context/bridge/useBridgeStore';
 import useBalances from '../../data/balances/useBalances';
 import { BridgeTokenWithBalance } from '@webb-tools/tangle-shared-ui/types';
@@ -52,6 +51,7 @@ import { WalletFillIcon } from '@webb-tools/icons';
 import { useBalance } from 'wagmi';
 import convertDecimalToBn from '@webb-tools/tangle-shared-ui/utils/convertDecimalToBn';
 import { useBridgeEvmBalances } from '../../data/bridge/useBridgeEvmBalances';
+import { ROUTER_NATIVE_TOKEN_ADDRESS } from '@webb-tools/tangle-shared-ui/constants/bridge';
 import useIsBridgeNativeToken from '../../hooks/useIsBridgeNativeToken';
 
 interface BridgeContainerProps {
@@ -340,7 +340,7 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
       .div(new Decimal(10).pow(selectedToken.decimals))
       .toString();
 
-    const formattedSendingAmount = `${sendingAmount} ${selectedToken.tokenSymbol}`;
+    const formattedSendingAmount = `${sendingAmount} ${selectedToken.symbol}`;
 
     const formattedGasFee =
       formatEther(hyperlaneQuote.fees.local.amount) +
@@ -437,7 +437,7 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
 
       return {
         symbol: token.tokenType,
-        optionalSymbol: token.tokenSymbol,
+        optionalSymbol: token.symbol,
         balance:
           activeAccount && balance
             ? parseFloat(balance.toString()).toFixed(6)