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/bridge/BridgeConfirmationModal.tsx

@@ -29,11 +29,6 @@ import { FC, useCallback, useMemo, useState } from 'react';
 
 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';
@@ -46,6 +41,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';
 
 interface BridgeConfirmationModalProps {
   isOpen: boolean;
@@ -474,6 +474,7 @@ export const BridgeConfirmationModal = ({
       clearBridgeStore();
     }
   }, [
+    setIsTxInProgress,
     sendingAmount,
     receivingAmount,
     token.bridgeType,
@@ -491,8 +492,8 @@ export const BridgeConfirmationModal = ({
     destinationAddress,
     setIsOpenQueueDropdown,
     updateTxState,
-    watchTransaction,
     addTxExplorerUrl,
+    watchTransaction,
     transferByHyperlaneAsync,
     notificationApi,
   ]);

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

@@ -56,8 +56,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;
@@ -118,24 +120,35 @@ const COLUMNS = [
       );
     },
   }),
-  COLUMN_HELPER.accessor('locked', {
-    header: () => 'Deposits',
-    sortingFn: sortByBn((row) => row.locked),
+  COLUMN_HELPER.display({
+    id: 'deposits-and-delegated',
+    header: () => 'Deposits | Delegation',
+    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 fmtDelegated = formatDisplayAmount(
+        props.row.original.delegated,
         props.row.original.decimals,
         AmountFormatStyle.SHORT,
       );
 
       const subtitle =
-        props.row.original.lockedInUsd === undefined
+        props.row.original.depositedInUsd === undefined
           ? undefined
-          : `$${props.row.original.lockedInUsd}`;
+          : `$${props.row.original.depositedInUsd}`;
 
       return (
         <TableCellWrapper>
-          <StatItem title={fmtLocked} subtitle={subtitle} removeBorder />
+          <StatItem
+            title={`${fmtDeposited} | ${fmtDelegated}`}
+            subtitle={subtitle}
+            removeBorder
+          />
         </TableCellWrapper>
       );
     },
@@ -187,7 +200,7 @@ const COLUMNS = [
               />
             )}
 
-            <Typography variant="body1">
+            <Typography variant="body1" className="dark:text-mono-0">
               {fmtTvl === undefined
                 ? `${fmtDepositCap}`
                 : `${fmtTvl} | ${fmtDepositCap}`}
@@ -255,9 +268,9 @@ const VaultsAndBalancesTable: FC = () => {
   const isAccountConnected = useIsAccountConnected();
   const { vaults } = useRestakeVaults();
   const assetsTvl = useRestakeAssetsTvl();
-  const erc20Balances = useTangleEvmErc20Balances();
+  const { data: erc20Balances } = useTangleEvmErc20Balances();
 
-  const getTotalLockedInAsset = useCallback(
+  const getAssetTvl = useCallback(
     (assetId: RestakeAssetId) => {
       const deposits = delegatorInfo?.deposits ?? {};
       const deposit = get(deposits, assetId);
@@ -268,23 +281,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[]>(() => {
@@ -309,7 +313,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]
@@ -328,12 +333,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,
@@ -346,7 +356,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';
 
 interface BridgeContainerProps {
   className?: string;
@@ -331,7 +331,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) +
@@ -402,13 +402,13 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
         (sourceTypedChainId === PresetTypedChainId.TangleMainnetEVM &&
           token.tokenType === EVMTokenEnum.TNT) ||
         (sourceTypedChainId === PresetTypedChainId.Polygon &&
-          token.tokenSymbol === 'POL') ||
+          token.symbol === 'POL') ||
         ((sourceTypedChainId === PresetTypedChainId.Optimism ||
           sourceTypedChainId === PresetTypedChainId.Arbitrum ||
           sourceTypedChainId === PresetTypedChainId.Base) &&
-          token.tokenSymbol === 'ETH') ||
+          token.symbol === 'ETH') ||
         (sourceTypedChainId === PresetTypedChainId.BSC &&
-          token.tokenSymbol === 'BNB');
+          token.symbol === 'BNB');
 
       const balance = isNativeToken
         ? formatEther(nativeTokenBalance?.value ?? BigInt(0))
@@ -440,7 +440,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)

apps/tangle-dapp/src/containers/restaking/JoinOperatorsModal.tsx

@@ -11,15 +11,18 @@ import {
   ModalHeader,
 } from '@webb-tools/webb-ui-components';
 import { OPERATOR_JOIN_DOCS_LINK } from '@webb-tools/webb-ui-components/constants/tangleDocs';
-import noop from 'lodash/noop';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import AmountInput from '../../components/AmountInput';
 import useBalances from '../../data/balances/useBalances';
 import useJoinOperatorsTx from '../../data/restake/useJoinOperatorsTx';
 import useApi from '../../hooks/useApi';
 import { TxStatus } from '../../hooks/useSubstrateTx';
 
-const JoinOperatorsModal: FC = () => {
+type Props = {
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const JoinOperatorsModal: FC<Props> = ({ setIsOpen }) => {
   const [bondAmount, setBondAmount] = useState<BN | null>(null);
   const { nativeTokenSymbol } = useNetworkStore();
   const { execute, status } = useJoinOperatorsTx();
@@ -66,6 +69,13 @@ const JoinOperatorsModal: FC = () => {
     return `A minimum bond amount of ${fmtMinOperatorBond} ${nativeTokenSymbol} is required to register as an operator. This stake recovered after an unbonding period.`;
   }, [minOperatorBond, nativeTokenSymbol]);
 
+  useEffect(() => {
+    if (status === TxStatus.COMPLETE) {
+      setBondAmount(null);
+      setIsOpen(false);
+    }
+  }, [setIsOpen, status]);
+
   return (
     <ModalContent size="sm">
       <ModalHeader>Join Operators</ModalHeader>