From 0736a7610d3fbe2a7e3268d65bedec661f90d3df Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavansoratur@MacBookAir.lan>
Date: Tue, 22 Oct 2024 04:29:07 -0700
Subject: [PATCH 1/3] chore: add selector modals to tangle dapp components

---
 .../app/bridge/AmountAndTokenInput.tsx        | 148 +++++++++++------
 .../app/bridge/BridgeContainer.tsx            |   3 +-
 .../tangle-dapp/app/bridge/ChainSelectors.tsx | 150 ++++++++++--------
 apps/tangle-dapp/app/bridge/FeeDetails.tsx    |   2 +-
 .../app/bridge/hooks/useActionButton.ts       |   2 +
 .../app/bridge/hooks/useBalance.ts            |  44 ++++-
 .../components/AmountInput/BaseInput.tsx      |   6 +-
 .../components/Lists/AssetList.tsx            | 121 ++++++++++++++
 .../components/Lists/ChainList.tsx            |  98 ++++++++++++
 .../components/Lists/ListCardWrapper.tsx      |  56 +++++++
 .../src/components/FeeDetails/FeeDetails.tsx  |   2 +-
 11 files changed, 510 insertions(+), 122 deletions(-)
 create mode 100644 apps/tangle-dapp/components/Lists/AssetList.tsx
 create mode 100644 apps/tangle-dapp/components/Lists/ChainList.tsx
 create mode 100644 apps/tangle-dapp/components/Lists/ListCardWrapper.tsx

diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
index 7f3bb7510..a17c32043 100644
--- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
+++ b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
@@ -1,25 +1,22 @@
 'use client';
 
-import { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
-import { TokenIcon } from '@webb-tools/icons/TokenIcon';
+import { Modal, ModalContent, useModal } from '@webb-tools/webb-ui-components';
 import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
-import {
-  Dropdown,
-  DropdownBody,
-  DropdownMenuItem,
-} from '@webb-tools/webb-ui-components/components/Dropdown';
-import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import Decimal from 'decimal.js';
-import { FC, useMemo } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import AmountInput from '../../components/AmountInput/AmountInput';
+import { AssetConfig, AssetList } from '../../components/Lists/AssetList';
 import { BRIDGE_SUPPORTED_TOKENS } from '../../constants/bridge';
 import { useBridge } from '../../context/BridgeContext';
+import useExplorerUrl from '../../hooks/useExplorerUrl';
+import { BridgeTokenId } from '../../types/bridge';
 import convertDecimalToBn from '../../utils/convertDecimalToBn';
 import useBalance from './hooks/useBalance';
+import { useTokenBalances } from './hooks/useBalance';
 import useDecimals from './hooks/useDecimals';
 import useSelectedToken from './hooks/useSelectedToken';
 import useTypedChainId from './hooks/useTypedChainId';
@@ -33,12 +30,15 @@ const AmountAndTokenInput: FC = () => {
     setIsAmountInputError,
     isAmountInputError,
     feeItems,
+    selectedSourceChain,
   } = useBridge();
   const selectedToken = useSelectedToken();
   const { balance, isLoading } = useBalance();
   const decimals = useDecimals();
   const { sourceTypedChainId } = useTypedChainId();
 
+  const getExplorerUrl = useExplorerUrl();
+
   const minAmount = useMemo(() => {
     const existentialDeposit =
       selectedToken.existentialDeposit[sourceTypedChainId];
@@ -55,11 +55,77 @@ const AmountAndTokenInput: FC = () => {
     feeItems.sygmaBridge?.amount,
   ]);
 
+  const {
+    status: isTokenModalOpen,
+    open: openTokenModal,
+    close: closeTokenModal,
+  } = useModal(false);
+
+  const { getTokenBalance } = useTokenBalances();
+  const [tokenBalances, setTokenBalances] = useState<
+    Record<string, Decimal | null>
+  >({});
+
+  const fetchBalances = useCallback(async () => {
+    const balances: Record<string, Decimal | null> = {};
+    for (const tokenId of tokenIdOptions) {
+      const token = BRIDGE_SUPPORTED_TOKENS[tokenId];
+      const erc20TokenContractAddress =
+        token.erc20TokenContractAddress?.[sourceTypedChainId];
+      balances[tokenId] = await getTokenBalance(
+        erc20TokenContractAddress ?? '0x0',
+        token.decimals[sourceTypedChainId] ?? 18,
+      );
+    }
+    setTokenBalances(balances);
+  }, [tokenIdOptions, getTokenBalance, sourceTypedChainId]);
+
+  useEffect(() => {
+    fetchBalances();
+  }, [fetchBalances]);
+
+  const assets: AssetConfig[] = useMemo(() => {
+    return tokenIdOptions.map((tokenId) => {
+      const token = BRIDGE_SUPPORTED_TOKENS[tokenId];
+      const erc20TokenContractAddress =
+        token.erc20TokenContractAddress?.[sourceTypedChainId];
+      const selectedChainExplorerUrl =
+        selectedSourceChain.blockExplorers?.default;
+      const explorerUrl = getExplorerUrl(
+        erc20TokenContractAddress ?? '0x0',
+        'address',
+        'web3',
+        selectedChainExplorerUrl?.url,
+        false,
+      );
+      return {
+        symbol: token.symbol,
+        balance: tokenBalances[tokenId] ?? new Decimal(0),
+        explorerUrl: explorerUrl?.toString(),
+      };
+    });
+  }, [
+    tokenIdOptions,
+    sourceTypedChainId,
+    selectedSourceChain.blockExplorers?.default,
+    getExplorerUrl,
+    tokenBalances,
+  ]);
+
+  const onSelectAsset = (asset: AssetConfig) => {
+    setSelectedTokenId(asset.symbol as BridgeTokenId);
+    closeTokenModal();
+  };
+
+  const selectedAssetBalance = useMemo(() => {
+    return tokenBalances[selectedToken.id] ?? new Decimal(0);
+  }, [tokenBalances, selectedToken.id]);
+
   return (
     <div className="relative">
       <div
         className={twMerge(
-          'w-full flex items-center gap-2 bg-mono-20 dark:bg-mono-160 rounded-lg pr-4',
+          'w-full flex items-center gap-2 bg-mono-20 dark:bg-mono-170 rounded-lg pr-4',
           isAmountInputError && 'border border-red-70 dark:border-red-50',
         )}
       >
@@ -83,39 +149,15 @@ const AmountAndTokenInput: FC = () => {
           }
           errorMessageClassName="absolute left-0 bottom-[-24px] !text-[14px] !leading-[21px]"
         />
-        <Dropdown>
-          <DropdownTrigger asChild>
-            <ChainOrTokenButton
-              value={selectedToken.symbol}
-              status="success"
-              className={twMerge(
-                'w-[130px] border-0 px-3 bg-[#EFF3F6] dark:bg-mono-140',
-                'hover:bg-[#EFF3F6] dark:hover:bg-mono-140',
-              )}
-              iconType="token"
-            />
-          </DropdownTrigger>
-          <DropdownBody className="border-0 w-[119px] min-w-fit mr-[11px]">
-            <ScrollArea className="max-h-[300px] w-[130px]">
-              <ul>
-                {tokenIdOptions.map((tokenId) => {
-                  const token = BRIDGE_SUPPORTED_TOKENS[tokenId];
-                  return (
-                    <li key={tokenId}>
-                      <DropdownMenuItem
-                        leftIcon={<TokenIcon size="lg" name={token.symbol} />}
-                        onSelect={() => setSelectedTokenId(tokenId)}
-                        className="px-3 normal-case"
-                      >
-                        {token.symbol}
-                      </DropdownMenuItem>
-                    </li>
-                  );
-                })}
-              </ul>
-            </ScrollArea>
-          </DropdownBody>
-        </Dropdown>
+
+        {/* Token Selector */}
+        <ChainOrTokenButton
+          value={selectedToken.symbol}
+          iconType="token"
+          onClick={openTokenModal}
+          className="w-[130px] border-0 px-3 bg-[#EFF3F6] dark:bg-mono-140"
+          status="success"
+        />
       </div>
 
       {isLoading ? (
@@ -129,11 +171,27 @@ const AmountAndTokenInput: FC = () => {
           className="absolute right-0 bottom-[-24px] text-mono-120 dark:text-mono-100"
         >
           Balance:{' '}
-          {balance !== null
-            ? `${balance.toString()} ${selectedToken.symbol}`
+          {selectedAssetBalance !== null
+            ? `${selectedAssetBalance.toString()} ${selectedToken.symbol}`
             : 'N/A'}
         </Typography>
       )}
+
+      <Modal>
+        {/* Token Selector Modal */}
+        <ModalContent
+          isCenter
+          isOpen={isTokenModalOpen}
+          onInteractOutside={closeTokenModal}
+          className="w-[500px] h-[600px]"
+        >
+          <AssetList
+            onClose={closeTokenModal}
+            assets={assets}
+            onSelectAsset={onSelectAsset}
+          />
+        </ModalContent>
+      </Modal>
     </div>
   );
 };
diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
index 4c5845f4e..7b3791b4e 100644
--- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
@@ -63,8 +63,7 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
     <>
       <div
         className={twMerge(
-          'max-w-[640px] min-h-[580px] bg-mono-0 dark:bg-mono-190 p-5 md:p-8',
-          'rounded-xl border border-mono-40 dark:border-mono-160',
+          'max-w-[640px] min-h-[580px] bg-mono-0 dark:bg-mono-190 p-5 md:p-8 rounded-xl',
           'shadow-webb-lg dark:shadow-webb-lg-dark',
           'flex flex-col',
           className,
diff --git a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
index a42f60533..b079e7b9d 100644
--- a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
+++ b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
@@ -1,30 +1,21 @@
 'use client';
 
-import { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
-import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
 import { ArrowRight } from '@webb-tools/icons/ArrowRight';
-import { ChainIcon } from '@webb-tools/icons/ChainIcon';
 import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
-import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
 import {
-  Dropdown,
-  DropdownBody,
-  DropdownMenuItem,
-} from '@webb-tools/webb-ui-components/components/Dropdown';
-import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+  Label,
+  Modal,
+  ModalContent,
+  useModal,
+} from '@webb-tools/webb-ui-components';
+import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
 import assert from 'assert';
 import { FC, useCallback } from 'react';
 
+import { ChainList } from '../../components/Lists/ChainList';
 import { BRIDGE } from '../../constants/bridge';
 import { useBridge } from '../../context/BridgeContext';
 
-interface ChainSelectorProps {
-  selectedChain: ChainConfig;
-  chainOptions: ChainConfig[];
-  onSelectChain: (chain: ChainConfig) => void;
-  className?: string;
-}
-
 const ChainSelectors: FC = () => {
   const {
     selectedSourceChain,
@@ -36,6 +27,18 @@ const ChainSelectors: FC = () => {
     setAmount,
   } = useBridge();
 
+  const {
+    status: isSourceChainModalOpen,
+    open: openSourceChainModal,
+    close: closeSourceChainModal,
+  } = useModal(false);
+
+  const {
+    status: isDestinationChainModalOpen,
+    open: openDestinationChainModal,
+    close: closeDestinationChainModal,
+  } = useModal(false);
+
   const onSwitchChains = useCallback(() => {
     const newSelectedDestinationChain = selectedSourceChain;
     const newSelectedSourceChain = selectedDestinationChain;
@@ -81,66 +84,75 @@ const ChainSelectors: FC = () => {
   ]);
 
   return (
-    <div className="flex flex-col md:flex-row justify-between items-center gap-3">
-      <ChainSelector
-        selectedChain={selectedSourceChain}
-        chainOptions={sourceChainOptions}
-        onSelectChain={setSelectedSourceChain}
-        className="flex-1 w-full md:w-auto"
-      />
+    <div className="flex flex-col md:flex-row justify-between items-end gap-3">
+      {/* Source Chain Selector */}
+      <div className="flex flex-col gap-2 w-full">
+        <Label
+          className="text-mono-120 dark:text-mono-120 font-bold"
+          htmlFor="bridge-source-chain-selector"
+        >
+          From
+        </Label>
+        <ChainOrTokenButton
+          value={selectedSourceChain.name}
+          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170"
+          iconType="chain"
+          onClick={openSourceChainModal}
+        />
+      </div>
 
-      <div
-        className="cursor-pointer p-1 rounded-full hover:bg-mono-20 dark:hover:bg-mono-160"
-        onClick={onSwitchChains}
-      >
+      <div className="cursor-pointer px-1 pb-[20px]" onClick={onSwitchChains}>
         <ArrowRight size="lg" className="rotate-90 md:rotate-0" />
       </div>
 
-      <ChainSelector
-        selectedChain={selectedDestinationChain}
-        chainOptions={destinationChainOptions}
-        onSelectChain={setSelectedDestinationChain}
-        className="flex-1 w-full md:w-auto"
-      />
-    </div>
-  );
-};
-
-const ChainSelector: FC<ChainSelectorProps> = ({
-  selectedChain,
-  chainOptions,
-  onSelectChain,
-  className,
-}) => {
-  return (
-    <Dropdown className={className}>
-      <DropdownTrigger asChild>
+      {/* Destination Chain Selector */}
+      <div className="flex flex-col gap-2 w-full">
+        <Label
+          className="text-mono-120 dark:text-mono-120 font-bold"
+          htmlFor="bridge-destination-chain-selector"
+        >
+          To
+        </Label>
         <ChainOrTokenButton
-          value={selectedChain.name}
-          className="w-full !p-4 bg-mono-20 dark:bg-mono-160 border-0 hover:bg-mono-20 dark:hover:bg-mono-160"
+          value={selectedDestinationChain.name}
+          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170"
           iconType="chain"
+          onClick={openDestinationChainModal}
         />
-      </DropdownTrigger>
-      <DropdownBody className="border-0">
-        <ScrollArea className="max-h-[300px] w-[calc(100vw-74px)] md:w-[259px]">
-          <ul>
-            {chainOptions.map((chain) => {
-              return (
-                <li key={`${chain.chainType}-${chain.id}`}>
-                  <DropdownMenuItem
-                    leftIcon={<ChainIcon size="lg" name={chain.name} />}
-                    onSelect={() => onSelectChain(chain)}
-                    className="py-2.5"
-                  >
-                    {chain.name}
-                  </DropdownMenuItem>
-                </li>
-              );
-            })}
-          </ul>
-        </ScrollArea>
-      </DropdownBody>
-    </Dropdown>
+      </div>
+
+      <Modal>
+        {/* Source Chain Modal */}
+        <ModalContent
+          isCenter
+          isOpen={isSourceChainModalOpen}
+          onInteractOutside={closeSourceChainModal}
+          className="w-[500px] h-[600px]"
+        >
+          <ChainList
+            onClose={closeSourceChainModal}
+            chains={sourceChainOptions}
+            onSelectChain={setSelectedSourceChain}
+            chainType="source"
+          />
+        </ModalContent>
+
+        {/* Destination Chain Modal */}
+        <ModalContent
+          isCenter
+          isOpen={isDestinationChainModalOpen}
+          onInteractOutside={closeDestinationChainModal}
+          className="w-[500px] h-[600px]"
+        >
+          <ChainList
+            onClose={closeDestinationChainModal}
+            chains={destinationChainOptions}
+            onSelectChain={setSelectedDestinationChain}
+            chainType="destination"
+          />
+        </ModalContent>
+      </Modal>
+    </div>
   );
 };
 
diff --git a/apps/tangle-dapp/app/bridge/FeeDetails.tsx b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
index 51901a923..8e866514e 100644
--- a/apps/tangle-dapp/app/bridge/FeeDetails.tsx
+++ b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
@@ -87,7 +87,7 @@ const FeeDetails = () => {
           },
         ].filter((item) => Boolean(item)) as Array<FeeItem>
       }
-      className="!bg-mono-20 dark:!bg-mono-160"
+      className="!bg-mono-20 dark:!bg-mono-170"
       titleClassName="!text-mono-100 dark:!text-mono-80"
       itemTitleClassName="!text-mono-100 dark:!text-mono-80"
     />
diff --git a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
index 2cb94078b..66e66c488 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
@@ -48,6 +48,8 @@ export default function useActionButton({
     setDestinationAddress,
   } = useBridge();
 
+  console.debug('feeItems', feeItems);
+
   const isNoActiveAccountOrWallet = useMemo(() => {
     return !activeAccount || !activeWallet;
   }, [activeAccount, activeWallet]);
diff --git a/apps/tangle-dapp/app/bridge/hooks/useBalance.ts b/apps/tangle-dapp/app/bridge/hooks/useBalance.ts
index 6e62aa8a3..94bd13449 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useBalance.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useBalance.ts
@@ -2,9 +2,10 @@
 
 import { isAddress } from '@polkadot/util-crypto';
 import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
+import { AddressType } from '@webb-tools/dapp-config/types';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import Decimal from 'decimal.js';
-import { useEffect, useMemo } from 'react';
+import { useCallback,useEffect, useMemo } from 'react';
 import useSWR from 'swr';
 
 import { useBridge } from '../../../context/BridgeContext';
@@ -192,3 +193,44 @@ function checkNativeToken(tokenSymbol: string, chainConfig: ChainConfig) {
     chainConfig.nativeCurrency.symbol.toLowerCase()
   );
 }
+
+export function useTokenBalances() {
+  const ethersProvider = useEthersProvider();
+  const activeAccountAddress = useActiveAccountAddress();
+  const { sourceTypedChainId } = useTypedChainId();
+
+  const getTokenBalance = useCallback(
+    async (erc20TokenContractAddress: AddressType, tokenDecimals: number) => {
+      if (
+        !ethersProvider ||
+        !activeAccountAddress ||
+        !isEvmAddress(activeAccountAddress)
+      ) {
+        return null;
+      }
+
+      if (!erc20TokenContractAddress) {
+        return null;
+      }
+
+      try {
+        const balance = await getEvmContractBalance({
+          provider: ethersProvider,
+          contractAddress: erc20TokenContractAddress,
+          accAddress: activeAccountAddress,
+          decimals: tokenDecimals,
+        });
+        return balance;
+      } catch (error) {
+        console.error(
+          `Error fetching balance for token ${erc20TokenContractAddress}:`,
+          error,
+        );
+        return null;
+      }
+    },
+    [ethersProvider, activeAccountAddress, sourceTypedChainId],
+  );
+
+  return { getTokenBalance };
+}
diff --git a/apps/tangle-dapp/components/AmountInput/BaseInput.tsx b/apps/tangle-dapp/components/AmountInput/BaseInput.tsx
index 08c7a3665..5c4adc069 100644
--- a/apps/tangle-dapp/components/AmountInput/BaseInput.tsx
+++ b/apps/tangle-dapp/components/AmountInput/BaseInput.tsx
@@ -93,8 +93,8 @@ const BaseInput: FC<BaseInputProps> = ({
           'px-2.5 lg:px-4 py-2',
           'flex items-center justify-between gap-2',
           'w-[356px] max-w-[356px]',
-          'bg-mono-20 dark:bg-mono-160',
-          'border border-mono-20 dark:border-mono-160',
+          'bg-mono-20 dark:bg-mono-170',
+          'border border-mono-40 dark:border-mono-170',
           hasError && 'border-red-70 dark:border-red-50',
           isFullWidth && 'w-full max-w-full',
           wrapperClassName,
@@ -103,7 +103,7 @@ const BaseInput: FC<BaseInputProps> = ({
         <div className="flex flex-col gap-1 w-full mr-auto">
           <div className="flex gap-1">
             <Label
-              className="text-mono-100 dark:text-mono-80 font-bold"
+              className="text-mono-120 dark:text-mono-120 font-bold"
               htmlFor={id}
             >
               {title}
diff --git a/apps/tangle-dapp/components/Lists/AssetList.tsx b/apps/tangle-dapp/components/Lists/AssetList.tsx
new file mode 100644
index 000000000..dff57dcdd
--- /dev/null
+++ b/apps/tangle-dapp/components/Lists/AssetList.tsx
@@ -0,0 +1,121 @@
+import { ExternalLinkLine, Search, TokenIcon } from '@webb-tools/icons';
+import {
+  getRoundedAmountString,
+  Input,
+  ListItem,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+import Decimal from 'decimal.js';
+import Link from 'next/link';
+import { ComponentProps, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { ListCardWrapper } from './ListCardWrapper';
+
+export type AssetConfig = {
+  symbol: string;
+  balance?: Decimal;
+  explorerUrl?: string;
+};
+
+type AssetListProps = {
+  title?: string;
+  onClose: () => void;
+  assets: AssetConfig[];
+  onSelectAsset: (asset: AssetConfig) => void;
+  overrideScrollAreaProps?: ComponentProps<typeof ScrollArea>;
+};
+
+export const AssetList = ({
+  assets,
+  onClose,
+  title = 'Select Network',
+  overrideScrollAreaProps,
+  onSelectAsset,
+}: AssetListProps) => {
+  const [searchText, setSearchText] = useState('');
+
+  const filteredAssets = useMemo(() => {
+    return assets.filter((asset) =>
+      asset.symbol.toLowerCase().includes(searchText.toLowerCase()),
+    );
+  }, [assets, searchText]);
+
+  return (
+    <ListCardWrapper title={title} onClose={onClose}>
+      <div className="px-4 md:px-9 pb-[10px] border-b border-mono-40 dark:border-mono-170">
+        <Input
+          id="chain"
+          rightIcon={<Search />}
+          placeholder="Search chains"
+          value={searchText}
+          onChange={(val) => setSearchText(val.toString())}
+          inputClassName="placeholder:text-mono-80 dark:placeholder:text-mono-120 "
+        />
+      </div>
+
+      <ScrollArea
+        {...overrideScrollAreaProps}
+        className={twMerge('w-full h-full', overrideScrollAreaProps?.className)}
+      >
+        <ul>
+          {filteredAssets.map((asset, idx) => (
+            <ListItem
+              key={`${asset.symbol}-${idx}`}
+              onClick={() => {
+                onSelectAsset(asset);
+                onClose?.();
+              }}
+              className="cursor-pointer w-full flex items-center gap-4 justify-between max-w-full min-h-[60px] py-[12px]"
+            >
+              <div className="flex items-center gap-2">
+                <TokenIcon
+                  size="lg"
+                  name={asset.symbol}
+                  className="mr-2 w-[38px] h-[38px]"
+                />
+
+                <div className="flex flex-col gap-1">
+                  <Typography
+                    variant="h5"
+                    fw="bold"
+                    className="block cursor-default text-mono-200 dark:text-mono-0"
+                  >
+                    {asset.symbol}
+                  </Typography>
+
+                  {asset.explorerUrl && (
+                    <Link
+                      href={asset.explorerUrl}
+                      target="_blank"
+                      className="flex items-center gap-1 z-20"
+                    >
+                      <Typography
+                        variant="body1"
+                        className="text-mono-120 dark:text-mono-100"
+                      >
+                        token address
+                      </Typography>
+                      <ExternalLinkLine />
+                    </Link>
+                  )}
+                </div>
+              </div>
+
+              <Typography
+                variant="h5"
+                fw="bold"
+                className="cursor-default text-mono-200 dark:text-mono-0"
+              >
+                {asset.balance
+                  ? `${getRoundedAmountString(asset.balance.toNumber(), 4)} ${asset.symbol}`
+                  : 'N/A'}
+              </Typography>
+            </ListItem>
+          ))}
+        </ul>
+      </ScrollArea>
+    </ListCardWrapper>
+  );
+};
diff --git a/apps/tangle-dapp/components/Lists/ChainList.tsx b/apps/tangle-dapp/components/Lists/ChainList.tsx
new file mode 100644
index 000000000..549882ca5
--- /dev/null
+++ b/apps/tangle-dapp/components/Lists/ChainList.tsx
@@ -0,0 +1,98 @@
+import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
+import { ChainConfig } from '@webb-tools/dapp-config';
+import { ChainIcon, Search } from '@webb-tools/icons';
+import {
+  Chip,
+  Input,
+  ListItem,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+import { ComponentProps, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { ListCardWrapper } from './ListCardWrapper';
+
+type ChainListProps = {
+  chainType: 'source' | 'destination';
+  title?: string;
+  onClose: () => void;
+  chains: ChainConfig[];
+  onSelectChain: (chain: ChainConfig) => void;
+  overrideScrollAreaProps?: ComponentProps<typeof ScrollArea>;
+};
+
+export const ChainList = ({
+  chains,
+  onClose,
+  title = 'Select Network',
+  overrideScrollAreaProps,
+  onSelectChain,
+  chainType,
+}: ChainListProps) => {
+  const [searchText, setSearchText] = useState('');
+
+  const filteredChains = useMemo(() => {
+    return chains.filter((chain) =>
+      chain.name.toLowerCase().includes(searchText.toLowerCase()),
+    );
+  }, [chains, searchText]);
+
+  const { activeChain } = useWebContext();
+
+  return (
+    <ListCardWrapper title={title} onClose={onClose}>
+      <div className="px-4 md:px-9 pb-[10px] border-b border-mono-40 dark:border-mono-170">
+        <Input
+          id="chain"
+          rightIcon={<Search />}
+          placeholder="Search chains"
+          value={'hello'}
+          onChange={(value) => setSearchText(value)}
+          inputClassName="placeholder:text-mono-80 dark:placeholder:text-mono-120"
+        />
+      </div>
+
+      <ScrollArea
+        {...overrideScrollAreaProps}
+        className={twMerge('w-full h-full', overrideScrollAreaProps?.className)}
+      >
+        <ul>
+          {filteredChains.map((chain, idx) => {
+            const isConnected =
+              chainType === 'source' && activeChain?.name === chain.name;
+
+            return (
+              <ListItem
+                key={`${chain.id}-${idx}`}
+                onClick={() => {
+                  onSelectChain(chain);
+                  onClose?.();
+                }}
+                className="cursor-pointer w-full flex items-center justify-between max-w-full min-h-[60px] py-[12px]"
+              >
+                <div className="flex items-center gap-4 justify-start">
+                  <ChainIcon
+                    size="lg"
+                    name={chain.name}
+                    className="cursor-pointer"
+                  />
+
+                  <Typography
+                    variant="h5"
+                    fw="bold"
+                    className="capitalize cursor-pointer"
+                  >
+                    {chain.name}
+                  </Typography>
+                </div>
+
+                {isConnected && <Chip color="green">Connected</Chip>}
+              </ListItem>
+            );
+          })}
+        </ul>
+      </ScrollArea>
+    </ListCardWrapper>
+  );
+};
diff --git a/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx b/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx
new file mode 100644
index 000000000..29a179c4f
--- /dev/null
+++ b/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx
@@ -0,0 +1,56 @@
+import { Close } from '@webb-tools/icons';
+import {
+  IWebbComponentBase,
+  PropsOf,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ComponentProps, forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface ListCardWrapperProps extends IWebbComponentBase, PropsOf<'div'> {
+  title: string;
+  overrideTitleProps?: ComponentProps<typeof Typography>;
+  onClose?: () => void;
+  hideCloseButton?: boolean;
+}
+
+export const ListCardWrapper = forwardRef<HTMLDivElement, ListCardWrapperProps>(
+  (
+    {
+      children,
+      className,
+      hideCloseButton = false,
+      onClose,
+      overrideTitleProps,
+      title,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        {...props}
+        className={twMerge(
+          'flex flex-col overflow-hidden',
+          'rounded-xl bg-mono-0 dark:bg-mono-190 w-full max-w-xl h-full',
+          className,
+        )}
+        ref={ref}
+      >
+        <div className="flex items-center justify-between mb-4 px-4 md:px-9 pt-4 md:pt-9">
+          <Typography variant="h4" fw="bold" {...overrideTitleProps}>
+            {title}
+          </Typography>
+
+          {!hideCloseButton && (
+            <Close onClick={onClose} size="lg" className="cursor-pointer" />
+          )}
+        </div>
+
+        {children}
+      </div>
+    );
+  },
+);
+
+ListCardWrapper.displayName = 'ListCardWrapper';
diff --git a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
index 8bc5faac5..088191a07 100644
--- a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
+++ b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
@@ -96,7 +96,7 @@ const FeeDetails = forwardRef<HTMLDivElement, FeeDetailsProps>(
           >
             <TitleWithInfo
               title={title ?? 'Fees'}
-              className="text-mono-120 dark:text-mono-100"
+              className="text-mono-120 dark:text-mono-120"
               titleClassName={cx('!text-inherit')}
               info={info}
             />

From 0b7cc4515d7a3aaf416ff6068d14d6b339677af8 Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavansoratur@MacBookAir.lan>
Date: Tue, 22 Oct 2024 04:57:42 -0700
Subject: [PATCH 2/3] chore: remove sygma bridge

---
 .../app/bridge/AmountAndTokenInput.tsx        |   8 +-
 .../app/bridge/BridgeConfirmationModal.tsx    |   1 -
 apps/tangle-dapp/app/bridge/FeeDetails.tsx    |  13 +-
 .../app/bridge/hooks/useActionButton.ts       |   1 -
 .../app/bridge/hooks/useAmountInDecimals.ts   |   4 -
 .../app/bridge/hooks/useBridgeFee.ts          |  89 +----
 .../app/bridge/hooks/useBridgeTransfer.ts     | 360 +++++-------------
 .../app/bridge/hooks/useEstimatedGasFee.ts    |  74 +---
 apps/tangle-dapp/app/bridge/hooks/useFees.ts  | 161 +-------
 .../app/bridge/lib/transfer/sygmaEvm.ts       |  56 ---
 .../app/bridge/lib/transfer/sygmaSubstrate.ts |  58 ---
 .../BridgeTxQueueItem.tsx                     |  91 +----
 apps/tangle-dapp/constants/bridge.ts          |  60 +--
 apps/tangle-dapp/context/BridgeContext.tsx    |  54 +--
 .../context/BridgeTxQueueContext.tsx          |  28 --
 .../lib/hyperlane/assembleChainMetadata.ts    |  12 +
 apps/tangle-dapp/types/bridge.ts              |  22 +-
 .../viemConnectorClientToEthersSigner.ts      |   1 -
 .../viemNetworkClientToEthersProvider.ts      |   1 -
 19 files changed, 141 insertions(+), 953 deletions(-)
 delete mode 100644 apps/tangle-dapp/app/bridge/lib/transfer/sygmaEvm.ts
 delete mode 100644 apps/tangle-dapp/app/bridge/lib/transfer/sygmaSubstrate.ts

diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
index a17c32043..10130699f 100644
--- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
+++ b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
@@ -29,7 +29,6 @@ const AmountAndTokenInput: FC = () => {
     tokenIdOptions,
     setIsAmountInputError,
     isAmountInputError,
-    feeItems,
     selectedSourceChain,
   } = useBridge();
   const selectedToken = useSelectedToken();
@@ -45,14 +44,13 @@ const AmountAndTokenInput: FC = () => {
     const destChainTransactionFee =
       selectedToken.destChainTransactionFee[sourceTypedChainId];
 
-    return (existentialDeposit ?? new Decimal(0))
-      .add(destChainTransactionFee ?? new Decimal(0))
-      .add(feeItems.sygmaBridge?.amount ?? new Decimal(0));
+    return (existentialDeposit ?? new Decimal(0)).add(
+      destChainTransactionFee ?? new Decimal(0),
+    );
   }, [
     selectedToken.existentialDeposit,
     selectedToken.destChainTransactionFee,
     sourceTypedChainId,
-    feeItems.sygmaBridge?.amount,
   ]);
 
   const {
diff --git a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
index 242978896..461b24eea 100644
--- a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
@@ -122,7 +122,6 @@ const BridgeConfirmationModal: FC<BridgeConfirmationModalProps> = ({
                 handleClose(); // TODO: handle clear form
               }}
               isDisabled={
-                feeItems.sygmaBridge?.isLoading ||
                 feeItems.hyperlaneInterchain?.isLoading ||
                 feeItems.gas?.isLoading ||
                 feeItems.gas?.amount === null ||
diff --git a/apps/tangle-dapp/app/bridge/FeeDetails.tsx b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
index 8e866514e..5dc3fb81e 100644
--- a/apps/tangle-dapp/app/bridge/FeeDetails.tsx
+++ b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
@@ -41,17 +41,6 @@ const FeeDetails = () => {
       isDefaultOpen={true}
       items={
         [
-          feeItems.sygmaBridge !== null && {
-            name: 'Bridge Fee',
-            value: (
-              <FeeValueCmp
-                fee={feeItems.sygmaBridge.amount}
-                symbol={feeItems.sygmaBridge.symbol}
-              />
-            ),
-            isLoading: feeItems.sygmaBridge.isLoading,
-            info: 'This transaction will charge a bridge fee to cover the destination chain’s gas fee.',
-          },
           feeItems.hyperlaneInterchain !== null && {
             name: 'Interchain Fee',
             value: (
@@ -61,7 +50,7 @@ const FeeDetails = () => {
               />
             ),
             isLoading: feeItems.hyperlaneInterchain.isLoading,
-            info: 'This transaction will charge a bridge fee to cover the destination chain’s gas fee.',
+            info: "This transaction will charge a bridge fee to cover the destination chain's gas fee.",
           },
           destChainTransactionFee !== null
             ? {
diff --git a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
index 66e66c488..d982835e9 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
@@ -175,7 +175,6 @@ export default function useActionButton({
           isAmountInputError ||
           isAddressInputError ||
           !feeItems.hyperlaneInterchain ||
-          feeItems.sygmaBridge?.isLoading ||
           feeItems.hyperlaneInterchain?.isLoading ||
           feeItems.gas?.isLoading ||
           feeItems.gas?.amount === null ||
diff --git a/apps/tangle-dapp/app/bridge/hooks/useAmountInDecimals.ts b/apps/tangle-dapp/app/bridge/hooks/useAmountInDecimals.ts
index f1a013ee6..e0ea6efbb 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useAmountInDecimals.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useAmountInDecimals.ts
@@ -18,15 +18,11 @@ export default function useAmountInDecimals() {
   }, [amount, decimals]);
 
   const subtractedAmount = useMemo(() => {
-    if (token.symbol === feeItems.sygmaBridge?.symbol)
-      return feeItems.sygmaBridge?.amount;
     if (token.symbol === feeItems.hyperlaneInterchain?.symbol)
       return feeItems.hyperlaneInterchain?.amount;
     return null;
   }, [
     token.symbol,
-    feeItems.sygmaBridge?.symbol,
-    feeItems.sygmaBridge?.amount,
     feeItems.hyperlaneInterchain?.symbol,
     feeItems.hyperlaneInterchain?.amount,
   ]);
diff --git a/apps/tangle-dapp/app/bridge/hooks/useBridgeFee.ts b/apps/tangle-dapp/app/bridge/hooks/useBridgeFee.ts
index a69d83f7c..7d8f80db4 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useBridgeFee.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useBridgeFee.ts
@@ -1,94 +1,21 @@
 'use client';
 
-import Decimal from 'decimal.js';
 import { useEffect } from 'react';
-import useSWR from 'swr';
 
 import { useBridge } from '../../../context/BridgeContext';
-import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
 import { BridgeFeeType, BridgeType } from '../../../types/bridge';
-import sygmaEvm from '../lib/transfer/sygmaEvm';
-import sygmaSubstrate from '../lib/transfer/sygmaSubstrate';
-import useAmountInStr from './useAmountInStr';
-import useDecimals from './useDecimals';
-import useEthersProvider from './useEthersProvider';
 import useSelectedToken from './useSelectedToken';
-import useSubstrateApi from './useSubstrateApi';
 
 export default function useBridgeFee() {
-  const activeAccountAddress = useActiveAccountAddress();
-  const {
-    destinationAddress,
-    bridgeType,
-    selectedSourceChain,
-    selectedDestinationChain,
-    updateFeeItem,
-  } = useBridge();
+  const { bridgeType, selectedSourceChain, updateFeeItem } = useBridge();
   const selectedToken = useSelectedToken();
-  const ethersProvider = useEthersProvider();
-  const api = useSubstrateApi();
-  const amountInStr = useAmountInStr();
-  const decimals = useDecimals();
-
-  const { data: evmSygmaFee, isLoading: isLoadingEvmSygmaFee } = useSWR(
-    [
-      activeAccountAddress !== null &&
-      bridgeType !== null &&
-      ethersProvider !== null
-        ? {
-            senderAddress: activeAccountAddress,
-            recipientAddress: destinationAddress,
-            provider: ethersProvider,
-            sourceChain: selectedSourceChain,
-            destinationChain: selectedDestinationChain,
-            token: selectedToken,
-            amount: amountInStr,
-          }
-        : undefined,
-    ],
-    async ([...args]) => {
-      const sygmaEvmTransfer = await sygmaEvm(...args);
-      if (sygmaEvmTransfer === null) return null;
-      return new Decimal(sygmaEvmTransfer.fee.fee.toString()).div(
-        Decimal.pow(10, decimals),
-      );
-    },
-  );
-
-  const { data: substrateSygmaFee, isLoading: isLoadingSubstrateSygmaFee } =
-    useSWR(
-      [
-        activeAccountAddress !== null && bridgeType !== null && api !== null
-          ? {
-              senderAddress: activeAccountAddress,
-              recipientAddress: destinationAddress,
-              api,
-              sourceChain: selectedSourceChain,
-              destinationChain: selectedDestinationChain,
-              token: selectedToken,
-              amount: amountInStr,
-            }
-          : undefined,
-      ],
-      async ([...args]) => {
-        const sygmaSubstrateTransfer = await sygmaSubstrate(...args);
-        if (sygmaSubstrateTransfer === null) return null;
-        return new Decimal(sygmaSubstrateTransfer.fee.fee.toString()).div(
-          Decimal.pow(10, decimals),
-        );
-      },
-    );
 
   const fee = (() => {
     switch (bridgeType) {
       case BridgeType.HYPERLANE_EVM_TO_EVM:
         return null;
-      case BridgeType.SYGMA_EVM_TO_EVM:
-      case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
-        return evmSygmaFee ?? null;
-      case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-      case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-        return substrateSygmaFee ?? null;
+      default:
+        return null;
     }
   })();
 
@@ -96,18 +23,14 @@ export default function useBridgeFee() {
     switch (bridgeType) {
       case BridgeType.HYPERLANE_EVM_TO_EVM:
         return false;
-      case BridgeType.SYGMA_EVM_TO_EVM:
-      case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
-        return isLoadingEvmSygmaFee;
-      case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-      case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-        return isLoadingSubstrateSygmaFee;
+      default:
+        return false;
     }
   })();
 
   useEffect(() => {
     updateFeeItem(
-      BridgeFeeType.SygmaBridge,
+      BridgeFeeType.HyperlaneInterchain,
       fee !== null
         ? {
             amount: fee,
diff --git a/apps/tangle-dapp/app/bridge/hooks/useBridgeTransfer.ts b/apps/tangle-dapp/app/bridge/hooks/useBridgeTransfer.ts
index 3ae695c72..9f3933d4e 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useBridgeTransfer.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useBridgeTransfer.ts
@@ -13,18 +13,14 @@ import { useCallback, useState } from 'react';
 import { useBridge } from '../../../context/BridgeContext';
 import { useBridgeTxQueue } from '../../../context/BridgeTxQueueContext';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
-import useSubstrateInjectedExtension from '../../../hooks/useSubstrateInjectedExtension';
 import { mailboxAddress } from '../../../lib/hyperlane/consts';
 import { hyperlaneTransfer } from '../../../lib/hyperlane/transfer';
 import { BridgeTxState, BridgeType } from '../../../types/bridge';
-import sygmaEvm from '../lib/transfer/sygmaEvm';
-import sygmaSubstrate from '../lib/transfer/sygmaSubstrate';
 import useAmountInDecimals from './useAmountInDecimals';
 import useAmountInStr from './useAmountInStr';
 import useEthersProvider from './useEthersProvider';
 import useEthersSigner from './useEthersSigner';
 import useSelectedToken from './useSelectedToken';
-import useSubstrateApi from './useSubstrateApi';
 import useTypedChainId from './useTypedChainId';
 
 export default function useBridgeTransfer({
@@ -33,7 +29,6 @@ export default function useBridgeTransfer({
   onTxAddedToQueue: () => void;
 }) {
   const activeAccountAddress = useActiveAccountAddress();
-  const injector = useSubstrateInjectedExtension();
   const {
     destinationAddress,
     bridgeType,
@@ -43,14 +38,12 @@ export default function useBridgeTransfer({
   const selectedToken = useSelectedToken();
   const ethersProvider = useEthersProvider();
   const ethersSigner = useEthersSigner();
-  const api = useSubstrateApi();
   const amountInStr = useAmountInStr();
   const { sourceTypedChainId, destinationTypedChainId } = useTypedChainId();
   const { sourceAmountInDecimals, destinationAmountInDecimals } =
     useAmountInDecimals();
   const {
     addTxToQueue,
-    addSygmaTxId,
     updateTxState,
     updateTxDestinationTxState,
     addTxDestinationTxExplorerUrl,
@@ -200,293 +193,116 @@ export default function useBridgeTransfer({
     });
     setDestinationTxIsExecutedOrFailed(false);
 
-    switch (bridgeType) {
-      case BridgeType.HYPERLANE_EVM_TO_EVM: {
-        if (ethersProvider === null) {
-          throw new Error('No Ethers Provider found');
-        }
-        if (ethersSigner === null) {
-          throw new Error('No Ethers Signer found');
-        }
+    if (bridgeType === BridgeType.HYPERLANE_EVM_TO_EVM) {
+      if (ethersProvider === null) {
+        throw new Error('No Ethers Provider found');
+      }
+      if (ethersSigner === null) {
+        throw new Error('No Ethers Signer found');
+      }
 
-        const hyperlaneResult = await hyperlaneTransfer({
-          sourceTypedChainId,
-          destinationTypedChainId,
-          senderAddress: activeAccountAddress,
-          recipientAddress: destinationAddress,
-          token: selectedToken,
-          amount: amountInStr,
+      const hyperlaneResult = await hyperlaneTransfer({
+        sourceTypedChainId,
+        destinationTypedChainId,
+        senderAddress: activeAccountAddress,
+        recipientAddress: destinationAddress,
+        token: selectedToken,
+        amount: amountInStr,
+      });
+
+      if (!hyperlaneResult) {
+        notificationApi({
+          variant: 'error',
+          message: 'Bridge transfer failed',
         });
 
-        if (!hyperlaneResult) {
-          notificationApi({
-            variant: 'error',
-            message: 'Bridge transfer failed',
-          });
-
-          return;
-        }
+        return;
+      }
 
-        const { txs } = hyperlaneResult;
+      const { txs } = hyperlaneResult;
 
-        for (const tx of txs) {
-          // Note, this doesn't use wagmi's prepare + send pattern because we're potentially sending two transactions
-          // The prepare hooks are recommended to use pre-click downtime to run async calls, but since the flow
-          // may require two serial txs, the prepare hooks aren't useful and complicate hook architecture considerably.
-          // See https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/issues/19
-          // See https://github.com/wagmi-dev/wagmi/discussions/1564
-          if (tx.type !== ProviderType.EthersV5) {
-            throw new Error('Unsupported provider type');
-          }
+      for (const tx of txs) {
+        if (tx.type !== ProviderType.EthersV5) {
+          throw new Error('Unsupported provider type');
         }
+      }
 
-        let txHash: string | undefined;
-
-        for (const [idx, tx] of txs.entries()) {
-          const res = await ethersSigner.sendTransaction(
-            tx.transaction as providers.TransactionRequest,
-          );
-
-          // There are two transactions, one for approvals and one for actual transfer
-          // We only want to add the actual transfer to the queue
-          if (idx === txs.length - 1) {
-            txHash = res.hash;
-            // add Tx to Queue
-            addTxToQueue({
-              hash: txHash,
-              env:
-                selectedSourceChain.tag === 'live'
-                  ? 'live'
-                  : selectedSourceChain.tag === 'test'
-                    ? 'test'
-                    : 'dev',
-              sourceTypedChainId,
-              destinationTypedChainId,
-              sourceAddress: activeAccountAddress,
-              recipientAddress: destinationAddress,
-              sourceAmount: sourceAmountInDecimals.toString(),
-              destinationAmount: destinationAmountInDecimals.toString(),
-              tokenSymbol: selectedToken.symbol,
-              creationTimestamp: new Date().getTime(),
-              type: bridgeType,
-            });
-
-            updateTxState(txHash, BridgeTxState.Sending);
-            if (chainsConfig[sourceTypedChainId].blockExplorers) {
-              addTxExplorerUrl(
-                txHash,
-                getExplorerURI(
-                  chainsConfig[sourceTypedChainId].blockExplorers.default.url,
-                  txHash,
-                  'tx',
-                  'web3',
-                ).toString(),
-              );
-            }
-            onTxAddedToQueue();
-          }
-
-          const receipt = await res.wait();
-
-          const message = HyperlaneCore.getDispatchedMessages(receipt);
+      let txHash: string | undefined;
 
-          if (txHash !== undefined) {
-            const messageId = message[0].id;
+      for (const [idx, tx] of txs.entries()) {
+        const res = await ethersSigner.sendTransaction(
+          tx.transaction as providers.TransactionRequest,
+        );
 
-            if (receipt.status === 1) {
-              if (message.length > 0) {
-                setDestinationTxHashAndMessageId({
-                  txHash,
-                  messageId,
-                });
-              }
+        if (idx === txs.length - 1) {
+          txHash = res.hash;
+          addTxToQueue({
+            hash: txHash,
+            env:
+              selectedSourceChain.tag === 'live'
+                ? 'live'
+                : selectedSourceChain.tag === 'test'
+                  ? 'test'
+                  : 'dev',
+            sourceTypedChainId,
+            destinationTypedChainId,
+            sourceAddress: activeAccountAddress,
+            recipientAddress: destinationAddress,
+            sourceAmount: sourceAmountInDecimals.toString(),
+            destinationAmount: destinationAmountInDecimals.toString(),
+            tokenSymbol: selectedToken.symbol,
+            creationTimestamp: new Date().getTime(),
+            type: bridgeType,
+          });
 
-              updateTxState(txHash, BridgeTxState.Executed);
-              updateTxDestinationTxState(
-                txHash,
-                '',
-                BridgeTxState.HyperlanePending,
-              );
-            } else {
-              updateTxState(txHash, BridgeTxState.Failed);
-              updateTxDestinationTxState(
+          updateTxState(txHash, BridgeTxState.Sending);
+          if (chainsConfig[sourceTypedChainId].blockExplorers) {
+            addTxExplorerUrl(
+              txHash,
+              getExplorerURI(
+                chainsConfig[sourceTypedChainId].blockExplorers.default.url,
                 txHash,
-                '',
-                BridgeTxState.HyperlaneFailed,
-              );
-            }
+                'tx',
+                'web3',
+              ).toString(),
+            );
           }
+          onTxAddedToQueue();
         }
 
-        break;
-      }
-
-      case BridgeType.SYGMA_EVM_TO_SUBSTRATE: {
-        if (ethersProvider === null) {
-          throw new Error('No Ethers Provider found');
-        }
-        if (ethersSigner === null) {
-          throw new Error('No Ethers Signer found');
-        }
-
-        const sygmaEvmTransfer = await sygmaEvm({
-          senderAddress: activeAccountAddress,
-          recipientAddress: destinationAddress,
-          provider: ethersProvider,
-          sourceChain: selectedSourceChain,
-          destinationChain: selectedDestinationChain,
-          token: selectedToken,
-          amount: amountInStr,
-        });
-
-        if (!sygmaEvmTransfer) {
-          throw new Error('Sygma EVM transfer failed');
-        }
-
-        const { tx, approvals } = sygmaEvmTransfer;
-
-        for (const approval of approvals) {
-          await ethersSigner.sendTransaction(
-            approval as providers.TransactionRequest,
-          );
-        }
-
-        const res = await ethersSigner.sendTransaction(tx);
-        const txHash = res.hash;
-
-        addTxToQueue({
-          hash: txHash,
-          env:
-            selectedSourceChain.tag === 'live'
-              ? 'live'
-              : selectedSourceChain.tag === 'test'
-                ? 'test'
-                : 'dev',
-          sourceTypedChainId,
-          destinationTypedChainId,
-          sourceAddress: activeAccountAddress,
-          recipientAddress: destinationAddress,
-          sourceAmount: sourceAmountInDecimals.toString(),
-          destinationAmount: destinationAmountInDecimals.toString(),
-          tokenSymbol: selectedToken.symbol,
-          creationTimestamp: new Date().getTime(),
-          type: bridgeType,
-        });
-
-        updateTxState(txHash, BridgeTxState.Sending);
-        onTxAddedToQueue();
-
         const receipt = await res.wait();
-        if (receipt.status === 1) {
-          addSygmaTxId(txHash, receipt.transactionHash);
-          updateTxState(txHash, BridgeTxState.SygmaIndexing);
-        } else {
-          updateTxState(txHash, BridgeTxState.Failed);
-        }
-        break;
-      }
 
-      case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-      case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE: {
-        if (api === null) {
-          throw new Error('No Substrate API found');
-        }
+        const message = HyperlaneCore.getDispatchedMessages(receipt);
 
-        if (injector === null) {
-          throw new Error('No wallet injector found');
-        }
-
-        const sygmaSubstrateTransfer = await sygmaSubstrate({
-          senderAddress: activeAccountAddress,
-          recipientAddress: destinationAddress,
-          api,
-          sourceChain: selectedSourceChain,
-          destinationChain: selectedDestinationChain,
-          token: selectedToken,
-          amount: amountInStr,
-        });
-
-        if (!sygmaSubstrateTransfer) {
-          throw new Error('Sygma Substrate transfer failed');
-        }
+        if (txHash !== undefined) {
+          const messageId = message[0].id;
 
-        const { tx } = sygmaSubstrateTransfer;
-
-        const unsub = await tx.signAndSend(
-          activeAccountAddress,
-          {
-            signer: injector.signer,
-            nonce: -1,
-          },
-          async ({
-            status,
-            dispatchError,
-            txHash,
-            txIndex,
-            blockNumber,
-            events,
-          }) => {
-            const txHashStr = txHash.toHex();
-
-            // Add to the queue when the tx is ready
-            if (status.isReady) {
-              addTxToQueue({
-                hash: txHashStr,
-                env:
-                  selectedSourceChain.tag === 'live'
-                    ? 'live'
-                    : selectedSourceChain.tag === 'test'
-                      ? 'test'
-                      : 'dev',
-                sourceTypedChainId,
-                destinationTypedChainId,
-                sourceAddress: activeAccountAddress,
-                recipientAddress: destinationAddress,
-                sourceAmount: sourceAmountInDecimals.toString(),
-                destinationAmount: destinationAmountInDecimals.toString(),
-                tokenSymbol: selectedToken.symbol,
-                creationTimestamp: new Date().getTime(),
-                type: bridgeType,
+          if (receipt.status === 1) {
+            if (message.length > 0) {
+              setDestinationTxHashAndMessageId({
+                txHash,
+                messageId,
               });
-
-              updateTxState(txHashStr, BridgeTxState.Sending);
-              onTxAddedToQueue();
             }
 
-            if (dispatchError) {
-              let message = `${dispatchError.type}`;
-              if (dispatchError.isModule) {
-                try {
-                  const mod = dispatchError.asModule;
-                  const error = dispatchError.registry.findMetaError(mod);
-                  message = `${error.section}.${error.name}`;
-                } catch (error) {
-                  console.error(error);
-                }
-              } else if (dispatchError.isToken) {
-                message = `${dispatchError.type}.${dispatchError.asToken.type}`;
-              }
-              updateTxState(txHashStr, BridgeTxState.Failed);
-              throw new Error(message);
-            }
-
-            if (status.isFinalized) {
-              addSygmaTxId(txHashStr, `${blockNumber}-${txIndex}`);
-
-              // Check if the transaction is Extrinsic Success or Failed
-              if (
-                events[events.length - 1].event.method === 'ExtrinsicFailed'
-              ) {
-                updateTxState(txHashStr, BridgeTxState.Failed);
-              } else {
-                updateTxState(txHashStr, BridgeTxState.SygmaIndexing);
-              }
-
-              unsub();
-            }
-          },
-        );
+            updateTxState(txHash, BridgeTxState.Executed);
+            updateTxDestinationTxState(
+              txHash,
+              '',
+              BridgeTxState.HyperlanePending,
+            );
+          } else {
+            updateTxState(txHash, BridgeTxState.Failed);
+            updateTxDestinationTxState(
+              txHash,
+              '',
+              BridgeTxState.HyperlaneFailed,
+            );
+          }
+        }
       }
+    } else {
+      throw new Error('Unsupported bridge type');
     }
   };
 }
diff --git a/apps/tangle-dapp/app/bridge/hooks/useEstimatedGasFee.ts b/apps/tangle-dapp/app/bridge/hooks/useEstimatedGasFee.ts
index 1173cb267..7544f183f 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useEstimatedGasFee.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useEstimatedGasFee.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { isAddress, isEthereumAddress } from '@polkadot/util-crypto';
+import { isEthereumAddress } from '@polkadot/util-crypto';
 import Decimal from 'decimal.js';
 import { useEffect, useMemo } from 'react';
 import useSWR from 'swr';
@@ -9,14 +9,10 @@ import { useBridge } from '../../../context/BridgeContext';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
 import { BridgeFeeType, BridgeType } from '../../../types/bridge';
 import { getEthersGasPrice } from '../lib/fee';
-import sygmaEvm from '../lib/transfer/sygmaEvm';
-import sygmaSubstrate from '../lib/transfer/sygmaSubstrate';
 import useAmountInStr from './useAmountInStr';
-import useDecimals from './useDecimals';
 import useEthersProvider from './useEthersProvider';
 import useEthersSigner from './useEthersSigner';
 import useSelectedToken from './useSelectedToken';
-import useSubstrateApi from './useSubstrateApi';
 
 export default function useEstimatedGasFee() {
   const activeAccountAddress = useActiveAccountAddress();
@@ -30,9 +26,7 @@ export default function useEstimatedGasFee() {
   const selectedToken = useSelectedToken();
   const ethersProvider = useEthersProvider();
   const ethersSigner = useEthersSigner();
-  const api = useSubstrateApi();
   const amountInStr = useAmountInStr();
-  const decimals = useDecimals();
 
   const { data: ethersGasPrice, isLoading: isLoadingEthersGasPrice } = useSWR(
     [ethersProvider !== null ? { provider: ethersProvider } : undefined],
@@ -63,82 +57,32 @@ export default function useEstimatedGasFee() {
           }
         : undefined,
     ],
-    async ([...args]) => {
-      const sygmaEvmTransfer = await sygmaEvm(...args);
-      if (sygmaEvmTransfer === null || ethersSigner === null) return null;
-      const { tx } = sygmaEvmTransfer;
-      return new Decimal((await ethersSigner.estimateGas(tx)).toString());
-    },
-  );
-
-  const {
-    data: substrateEstimatedGasFee,
-    isLoading: isLoadingSubstrateEstimatedGasFee,
-  } = useSWR(
-    [
-      activeAccountAddress !== null &&
-      isAddress(activeAccountAddress) &&
-      bridgeType !== null &&
-      api !== null
-        ? {
-            senderAddress: activeAccountAddress,
-            recipientAddress: destinationAddress,
-            api,
-            sourceChain: selectedSourceChain,
-            destinationChain: selectedDestinationChain,
-            token: selectedToken,
-            amount: amountInStr,
-          }
-        : undefined,
-    ],
-    async ([...args]) => {
-      const sygmaSubstrateTransfer = await sygmaSubstrate(...args);
-      if (sygmaSubstrateTransfer === null || activeAccountAddress === null)
-        return null;
-      const { tx } = sygmaSubstrateTransfer;
-      const { partialFee } = await tx.paymentInfo(activeAccountAddress);
-      return new Decimal(partialFee.toString()).div(Decimal.pow(10, decimals));
+    async () => {
+      // Implement EVM gas estimation logic here
+      // This is a placeholder and should be replaced with actual implementation
+      return new Decimal('21000'); // Placeholder value
     },
   );
 
   const fee = useMemo(() => {
     switch (bridgeType) {
-      case BridgeType.SYGMA_EVM_TO_EVM:
-      case BridgeType.SYGMA_EVM_TO_SUBSTRATE: {
+      case BridgeType.HYPERLANE_EVM_TO_EVM: {
         if (ethersGasPrice == null || evmEstimatedGasPrice == null) return null;
         return ethersGasPrice.times(evmEstimatedGasPrice);
       }
-      case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-      case BridgeType.SYGMA_SUBSTRATE_TO_EVM: {
-        return substrateEstimatedGasFee ?? null;
-      }
       default:
         return null;
     }
-  }, [
-    bridgeType,
-    ethersGasPrice,
-    evmEstimatedGasPrice,
-    substrateEstimatedGasFee,
-  ]);
+  }, [bridgeType, ethersGasPrice, evmEstimatedGasPrice]);
 
   const isLoading = useMemo(() => {
     switch (bridgeType) {
-      case BridgeType.SYGMA_EVM_TO_EVM:
-      case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
+      case BridgeType.HYPERLANE_EVM_TO_EVM:
         return isLoadingEthersGasPrice || isLoadingEvmEstimatedGasPrice;
-      case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-      case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-        return isLoadingSubstrateEstimatedGasFee;
       default:
         return false;
     }
-  }, [
-    bridgeType,
-    isLoadingEthersGasPrice,
-    isLoadingEvmEstimatedGasPrice,
-    isLoadingSubstrateEstimatedGasFee,
-  ]);
+  }, [bridgeType, isLoadingEthersGasPrice, isLoadingEvmEstimatedGasPrice]);
 
   useEffect(() => {
     updateFeeItem(BridgeFeeType.Gas, {
diff --git a/apps/tangle-dapp/app/bridge/hooks/useFees.ts b/apps/tangle-dapp/app/bridge/hooks/useFees.ts
index c69455797..cbef96061 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useFees.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useFees.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { isAddress, isEthereumAddress } from '@polkadot/util-crypto';
+import { isEthereumAddress } from '@polkadot/util-crypto';
 import Decimal from 'decimal.js';
 import { useEffect } from 'react';
 import useSWR from 'swr';
@@ -14,14 +14,11 @@ import {
   BridgeType,
 } from '../../../types/bridge';
 import { getEthersGasPrice } from '../lib/fee';
-import sygmaEvm from '../lib/transfer/sygmaEvm';
-import sygmaSubstrate from '../lib/transfer/sygmaSubstrate';
 import useAmountInStr from './useAmountInStr';
 import useDecimals from './useDecimals';
 import useEthersProvider from './useEthersProvider';
 import useEthersSigner from './useEthersSigner';
 import useSelectedToken from './useSelectedToken';
-import useSubstrateApi from './useSubstrateApi';
 import useTypedChainId from './useTypedChainId';
 
 export default function useFees() {
@@ -36,64 +33,10 @@ export default function useFees() {
   const selectedToken = useSelectedToken();
   const ethersProvider = useEthersProvider();
   const ethersSigner = useEthersSigner();
-  const api = useSubstrateApi();
   const amountInStr = useAmountInStr();
   const decimals = useDecimals();
   const { sourceTypedChainId, destinationTypedChainId } = useTypedChainId();
 
-  // Sygma EVM Fee
-  const { data: evmSygmaFee, isLoading: isLoadingEvmSygmaFee } = useSWR(
-    [
-      activeAccountAddress !== null &&
-      bridgeType !== null &&
-      ethersProvider !== null
-        ? {
-            senderAddress: activeAccountAddress,
-            recipientAddress: destinationAddress,
-            provider: ethersProvider,
-            sourceChain: selectedSourceChain,
-            destinationChain: selectedDestinationChain,
-            token: selectedToken,
-            amount: amountInStr,
-          }
-        : null,
-    ],
-    async ([args]) => {
-      if (!args) return null;
-      const sygmaEvmTransfer = await sygmaEvm(args);
-      if (sygmaEvmTransfer === null) return null;
-      return new Decimal(sygmaEvmTransfer.fee.fee.toString()).div(
-        Decimal.pow(10, decimals),
-      );
-    },
-  );
-
-  // Sygma Substrate Fee
-  const { data: substrateSygmaFee, isLoading: isLoadingSubstrateSygmaFee } =
-    useSWR(
-      [
-        activeAccountAddress !== null && bridgeType !== null && api !== null
-          ? {
-              senderAddress: activeAccountAddress,
-              recipientAddress: destinationAddress,
-              api,
-              sourceChain: selectedSourceChain,
-              destinationChain: selectedDestinationChain,
-              token: selectedToken,
-              amount: amountInStr,
-            }
-          : null,
-      ],
-      async ([args]) => {
-        if (!args) return null;
-        const sygmaSubstrateTransfer = await sygmaSubstrate(args);
-        if (sygmaSubstrateTransfer === null) return null;
-        return new Decimal(sygmaSubstrateTransfer.fee.fee.toString()).div(
-          Decimal.pow(10, decimals),
-        );
-      },
-    );
-
   // Ethers Gas Price
   const { data: ethersGasPrice, isLoading: isLoadingEthersGasPrice } = useSWR(
     [ethersProvider !== null ? { provider: ethersProvider } : null],
@@ -128,41 +71,9 @@ export default function useFees() {
     ],
     async ([args]) => {
       if (!args || !ethersSigner) return null;
-      const sygmaEvmTransfer = await sygmaEvm(args);
-      if (sygmaEvmTransfer === null) return null;
-      const { tx } = sygmaEvmTransfer;
-      return new Decimal((await ethersSigner.estimateGas(tx)).toString());
-    },
-  );
-
-  // Substrate Estimated Gas Fee
-  const {
-    data: substrateEstimatedGasFee,
-    isLoading: isLoadingSubstrateEstimatedGasFee,
-  } = useSWR(
-    [
-      activeAccountAddress !== null &&
-      isAddress(activeAccountAddress) &&
-      bridgeType !== null &&
-      api !== null
-        ? {
-            senderAddress: activeAccountAddress,
-            recipientAddress: destinationAddress,
-            api,
-            sourceChain: selectedSourceChain,
-            destinationChain: selectedDestinationChain,
-            token: selectedToken,
-            amount: amountInStr,
-          }
-        : null,
-    ],
-    async ([args]) => {
-      if (!args || !activeAccountAddress) return null;
-      const sygmaSubstrateTransfer = await sygmaSubstrate(args);
-      if (sygmaSubstrateTransfer === null) return null;
-      const { tx } = sygmaSubstrateTransfer;
-      const { partialFee } = await tx.paymentInfo(activeAccountAddress);
-      return new Decimal(partialFee.toString()).div(Decimal.pow(10, decimals));
+      // Implement EVM gas estimation logic here
+      // This is a placeholder and should be replaced with actual implementation
+      return new Decimal('21000'); // Placeholder value
     },
   );
 
@@ -205,55 +116,16 @@ export default function useFees() {
   );
 
   useEffect(() => {
-    function calculateBridgeFee(): BridgeFeeItem | null {
-      let fee = null;
-      let isLoading = false;
-
-      switch (bridgeType) {
-        case BridgeType.SYGMA_EVM_TO_EVM:
-        case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
-          fee = evmSygmaFee ?? null;
-          isLoading = isLoadingEvmSygmaFee;
-          break;
-        case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-        case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-          fee = substrateSygmaFee ?? null;
-          isLoading = isLoadingSubstrateSygmaFee;
-          break;
-      }
-
-      if (fee === null) {
-        return null;
-      }
-
-      return {
-        amount: fee,
-        isLoading,
-        symbol: selectedSourceChain.nativeCurrency.symbol,
-      };
-    }
-
     function calculateGasFee(): BridgeFeeItem | null {
       let fee = null;
       let isLoading = false;
 
-      switch (bridgeType) {
-        case BridgeType.HYPERLANE_EVM_TO_EVM:
-          fee = hyperlaneFees?.gasFee.amount ?? null;
-          isLoading = isLoadingHyperlaneFees;
-          break;
-        case BridgeType.SYGMA_EVM_TO_EVM:
-        case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
-          if (ethersGasPrice && evmEstimatedGasPrice) {
-            fee = ethersGasPrice.times(evmEstimatedGasPrice);
-          }
-          isLoading = isLoadingEthersGasPrice || isLoadingEvmEstimatedGasPrice;
-          break;
-        case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-        case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-          fee = substrateEstimatedGasFee ?? null;
-          isLoading = isLoadingSubstrateEstimatedGasFee;
-          break;
+      if (bridgeType === BridgeType.HYPERLANE_EVM_TO_EVM) {
+        fee = hyperlaneFees?.gasFee.amount ?? null;
+        isLoading = isLoadingHyperlaneFees;
+      } else if (ethersGasPrice && evmEstimatedGasPrice) {
+        fee = ethersGasPrice.times(evmEstimatedGasPrice);
+        isLoading = isLoadingEthersGasPrice || isLoadingEvmEstimatedGasPrice;
       }
 
       if (fee === null) {
@@ -279,10 +151,6 @@ export default function useFees() {
       };
     }
 
-    // Bridge Fee
-    const bridgeFee = calculateBridgeFee();
-    updateFeeItem(BridgeFeeType.SygmaBridge, bridgeFee);
-
     // Gas Fee
     const gasFee = calculateGasFee();
     updateFeeItem(BridgeFeeType.Gas, gasFee);
@@ -292,28 +160,19 @@ export default function useFees() {
     updateFeeItem(BridgeFeeType.HyperlaneInterchain, interchainFee);
   }, [
     bridgeType,
-    evmSygmaFee,
-    substrateSygmaFee,
     ethersGasPrice,
     evmEstimatedGasPrice,
-    substrateEstimatedGasFee,
     hyperlaneFees,
     updateFeeItem,
     selectedSourceChain.nativeCurrency.symbol,
-    isLoadingEvmSygmaFee,
-    isLoadingSubstrateSygmaFee,
     isLoadingHyperlaneFees,
     isLoadingEthersGasPrice,
     isLoadingEvmEstimatedGasPrice,
-    isLoadingSubstrateEstimatedGasFee,
   ]);
 
   const isLoading =
-    isLoadingEvmSygmaFee ||
-    isLoadingSubstrateSygmaFee ||
     isLoadingEthersGasPrice ||
     isLoadingEvmEstimatedGasPrice ||
-    isLoadingSubstrateEstimatedGasFee ||
     isLoadingHyperlaneFees;
 
   return isLoading;
diff --git a/apps/tangle-dapp/app/bridge/lib/transfer/sygmaEvm.ts b/apps/tangle-dapp/app/bridge/lib/transfer/sygmaEvm.ts
deleted file mode 100644
index c822d2112..000000000
--- a/apps/tangle-dapp/app/bridge/lib/transfer/sygmaEvm.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Environment, EVMAssetTransfer } from '@buildwithsygma/sygma-sdk-core';
-import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
-import { ethers } from 'ethers';
-
-import { BridgeTokenType } from '../../../../types/bridge';
-
-export default async function sygmaEvm(params?: {
-  senderAddress: string;
-  recipientAddress: string;
-  provider: ethers.providers.BaseProvider;
-  sourceChain: ChainConfig;
-  destinationChain: ChainConfig;
-  token: BridgeTokenType;
-  amount: string;
-}) {
-  if (!params) return null;
-
-  const {
-    senderAddress,
-    recipientAddress,
-    provider,
-    sourceChain,
-    destinationChain,
-    token,
-    amount,
-  } = params;
-
-  const assetTransfer = new EVMAssetTransfer();
-  await assetTransfer.init(
-    provider,
-    sourceChain.tag === 'live'
-      ? Environment.MAINNET
-      : sourceChain.tag === 'test'
-        ? Environment.TESTNET
-        : Environment.DEVNET,
-  );
-
-  if (!token.sygmaResourceId) {
-    throw new Error('Token does not have a Sygma resource ID');
-  }
-
-  const transfer = await assetTransfer.createFungibleTransfer(
-    senderAddress,
-    // NOTE: make sure the chain id is the same with Sygma SDK
-    destinationChain.id,
-    recipientAddress,
-    token.sygmaResourceId,
-    amount,
-  );
-
-  const fee = await assetTransfer.getFee(transfer);
-  const tx = await assetTransfer.buildTransferTransaction(transfer, fee);
-  const approvals = await assetTransfer.buildApprovals(transfer, fee);
-
-  return { fee, tx, approvals };
-}
diff --git a/apps/tangle-dapp/app/bridge/lib/transfer/sygmaSubstrate.ts b/apps/tangle-dapp/app/bridge/lib/transfer/sygmaSubstrate.ts
deleted file mode 100644
index 0ba82650b..000000000
--- a/apps/tangle-dapp/app/bridge/lib/transfer/sygmaSubstrate.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Environment, Substrate } from '@buildwithsygma/sygma-sdk-core';
-import { ApiPromise } from '@polkadot/api';
-import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
-
-import { BridgeTokenType } from '../../../../types/bridge';
-
-const { SubstrateAssetTransfer } = Substrate;
-
-export default async function sygmaSubstrate(params?: {
-  senderAddress: string;
-  recipientAddress: string;
-  api: ApiPromise;
-  sourceChain: ChainConfig;
-  destinationChain: ChainConfig;
-  token: BridgeTokenType;
-  amount: string;
-}) {
-  if (!params) return null;
-
-  const {
-    senderAddress,
-    recipientAddress,
-    api,
-    sourceChain,
-    destinationChain,
-    token,
-    amount,
-  } = params;
-
-  const assetTransfer = new SubstrateAssetTransfer();
-
-  await assetTransfer.init(
-    api,
-    sourceChain.tag === 'live'
-      ? Environment.MAINNET
-      : sourceChain.tag === 'test'
-        ? Environment.TESTNET
-        : Environment.DEVNET, // (i.e. DEVNET, TESTNET, MAINNET)
-  );
-
-  if (!token.sygmaResourceId) {
-    throw new Error('Token does not have a Sygma resource ID');
-  }
-
-  const transfer = await assetTransfer.createFungibleTransfer(
-    senderAddress,
-    // NOTE: make sure the chain id is the same with Sygma SDK
-    destinationChain.id,
-    recipientAddress,
-    token.sygmaResourceId,
-    amount,
-  );
-
-  const fee = await assetTransfer.getFee(transfer);
-  const tx = assetTransfer.buildTransferTransaction(transfer, fee);
-
-  return { fee, tx };
-}
diff --git a/apps/tangle-dapp/components/BridgeTxQueueDropdown/BridgeTxQueueItem.tsx b/apps/tangle-dapp/components/BridgeTxQueueDropdown/BridgeTxQueueItem.tsx
index 4b3dd6b80..a01fd0e8c 100644
--- a/apps/tangle-dapp/components/BridgeTxQueueDropdown/BridgeTxQueueItem.tsx
+++ b/apps/tangle-dapp/components/BridgeTxQueueDropdown/BridgeTxQueueItem.tsx
@@ -1,10 +1,5 @@
 'use client';
 
-import {
-  Environment,
-  getTransferStatusData,
-  TransferStatusResponse,
-} from '@buildwithsygma/sygma-sdk-core';
 import { StatusVariant } from '@webb-tools/icons/StatusIndicator/types';
 import { TxProgressor } from '@webb-tools/webb-ui-components/components/TxProgressor';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
@@ -28,57 +23,11 @@ const BridgeTxQueueItem: FC<BridgeTxQueueItemProps> = ({ tx, className }) => {
     useBridgeTxQueue();
 
   useEffect(() => {
-    const sygmaTxId = tx.sygmaTxId;
-    if (sygmaTxId === undefined) return;
-
-    let interval: ReturnType<typeof setTimeout> | undefined = undefined;
-
-    const getTxStatus = () => {
-      getSygmaTxStatus(
-        sygmaTxId,
-        tx.env === 'live'
-          ? Environment.MAINNET
-          : tx.env === 'test'
-            ? Environment.TESTNET
-            : Environment.DEVNET,
-      )
-        .then((data) => {
-          if (data && data[0]) {
-            const status = data[0].status;
-            if (status === 'executed') {
-              updateTxState(tx.hash, BridgeTxState.Executed);
-              clearInterval(interval);
-            } else if (status === 'pending') {
-              updateTxState(tx.hash, BridgeTxState.SygmaPending);
-              clearInterval(interval);
-            } else if (status === 'failed') {
-              updateTxState(tx.hash, BridgeTxState.Failed);
-              clearInterval(interval);
-            }
-            addTxExplorerUrl(tx.hash, data[0].explorerUrl);
-          }
-        })
-        .catch(() => {
-          updateTxState(tx.hash, BridgeTxState.Failed);
-          clearInterval(interval); // Clear interval on error to avoid repeated failures.
-        });
-    };
-
-    // Run for the first time when the component is mounted
-    getTxStatus();
-
-    // Set interval to run getTxStatus every 5 seconds
-    interval = setInterval(() => {
-      getTxStatus();
-    }, 5000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [tx.sygmaTxId, tx.env, tx.hash, updateTxState, addTxExplorerUrl]);
+    // Hyperlane-specific logic can be added here if needed
+  }, [tx.hash, updateTxState, addTxExplorerUrl]);
 
   return (
-    <TxProgressor.Root key={tx.sygmaTxId} className={className}>
+    <TxProgressor.Root key={tx.hash} className={className}>
       <TxProgressor.Header name="Bridge" createdAt={tx.creationTimestamp} />
       <TxProgressor.Body
         txSourceInfo={{
@@ -136,21 +85,12 @@ const getTotalSteps = (type: BridgeType) => {
   switch (type) {
     case BridgeType.HYPERLANE_EVM_TO_EVM:
       return 3; // 1.Initializing 2.Sending 3.Executed or Failed
-    case BridgeType.SYGMA_EVM_TO_EVM:
-    case BridgeType.SYGMA_SUBSTRATE_TO_EVM:
-    case BridgeType.SYGMA_EVM_TO_SUBSTRATE:
-    case BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE:
-      return 5; // 1.Initializing 2.Sending 3.Indexing 4.Pending 5.Executed or Failed
+    default:
+      return 3;
   }
 };
 
 const getActiveStep = (state: BridgeTxState, type: BridgeType): number => {
-  const isSygma =
-    type === BridgeType.SYGMA_EVM_TO_EVM ||
-    type === BridgeType.SYGMA_SUBSTRATE_TO_EVM ||
-    type === BridgeType.SYGMA_EVM_TO_SUBSTRATE ||
-    type === BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE;
-
   const isHyperlane = type === BridgeType.HYPERLANE_EVM_TO_EVM;
 
   switch (state) {
@@ -158,13 +98,9 @@ const getActiveStep = (state: BridgeTxState, type: BridgeType): number => {
       return 1;
     case BridgeTxState.Sending:
       return 2;
-    case BridgeTxState.SygmaIndexing:
-      return isSygma ? 3 : 1;
-    case BridgeTxState.SygmaPending:
-      return isSygma ? 4 : 1;
     case BridgeTxState.Executed:
     case BridgeTxState.Failed:
-      return isSygma ? 5 : 3;
+      return 3;
     case BridgeTxState.HyperlanePending:
     case BridgeTxState.HyperlaneIndexing:
       return isHyperlane ? 2 : 1;
@@ -185,9 +121,6 @@ const getStatus = (state: BridgeTxState): StatusVariant => {
       return 'success';
     case BridgeTxState.Failed:
       return 'error';
-    case BridgeTxState.SygmaIndexing:
-    case BridgeTxState.SygmaPending:
-      return 'info';
     case BridgeTxState.HyperlanePending:
       return 'info';
     case BridgeTxState.HyperlaneIndexing:
@@ -211,10 +144,6 @@ const getStatusMessage = (state: BridgeTxState): string => {
       return 'Executed';
     case BridgeTxState.Failed:
       return 'Failed';
-    case BridgeTxState.SygmaIndexing:
-      return 'Indexing';
-    case BridgeTxState.SygmaPending:
-      return 'Pending';
     case BridgeTxState.HyperlanePending:
       return 'Pending';
     case BridgeTxState.HyperlaneIndexing:
@@ -227,11 +156,3 @@ const getStatusMessage = (state: BridgeTxState): string => {
       return 'Failed';
   }
 };
-
-const getSygmaTxStatus = async (
-  txHash: string,
-  env: Environment,
-): Promise<TransferStatusResponse[]> => {
-  const data = await getTransferStatusData(env, txHash);
-  return data as TransferStatusResponse[];
-};
diff --git a/apps/tangle-dapp/constants/bridge.ts b/apps/tangle-dapp/constants/bridge.ts
index f511c6faa..9ffab2d46 100644
--- a/apps/tangle-dapp/constants/bridge.ts
+++ b/apps/tangle-dapp/constants/bridge.ts
@@ -3,38 +3,6 @@ import { PresetTypedChainId } from '@webb-tools/dapp-types';
 import { BridgeTokenId, BridgeTokenType, ChainId } from '../types/bridge';
 
 export const BRIDGE_SUPPORTED_TOKENS: Record<BridgeTokenId, BridgeTokenType> = {
-  tTNT: {
-    id: 'tTNT',
-    symbol: 'tTNT',
-    existentialDeposit: {},
-    destChainTransactionFee: {},
-    decimals: { default: 18 },
-  },
-  TNT: {
-    id: 'TNT',
-    symbol: 'TNT',
-    existentialDeposit: {},
-    destChainTransactionFee: {},
-    decimals: { default: 18 },
-  },
-  sygUSD: {
-    id: 'sygUSD',
-    symbol: 'sygUSD',
-    existentialDeposit: {},
-    destChainTransactionFee: {},
-    decimals: { default: 6, [PresetTypedChainId.Sepolia]: 18 },
-    substrateAssetId: {
-      [PresetTypedChainId.RococoPhala]: 1984,
-      [PresetTypedChainId.TangleTestnetNative]: 2000,
-    },
-    sygmaResourceId:
-      '0x0000000000000000000000000000000000000000000000000000000000001100',
-    erc20TokenContractAddress: {
-      [PresetTypedChainId.Sepolia]:
-        '0xA9F30c6B5E7996D1bAd51D213277c30750bcBB36',
-    },
-  },
-  // TODO: remove this (this is for testing Hyperlane only)
   WETH: {
     id: 'WETH',
     symbol: 'WETH',
@@ -44,14 +12,18 @@ export const BRIDGE_SUPPORTED_TOKENS: Record<BridgeTokenId, BridgeTokenType> = {
       default: 18,
     },
     erc20TokenContractAddress: {
+      // WETH on Holesky (Not Collateral)
       [PresetTypedChainId.Holesky]:
         '0x94373a4919B3240D86eA41593D5eBa789FEF3848',
+      // WETH on Tangle Testnet EVM (Collateral)
       [PresetTypedChainId.TangleTestnetEVM]:
         '0x200DE548e393c38ee80482e9c5c186CBA7096ad4',
     },
     hyperlaneRouteContractAddress: {
+      // WETH on Holesky (Collateral)
       [PresetTypedChainId.Holesky]:
         '0xdFe0fbA0F8C62278DF4A9fDc787F9cFF28522FD3',
+      // WETH on Tangle Testnet EVM (Collateral)
       [PresetTypedChainId.TangleTestnetEVM]:
         '0x200DE548e393c38ee80482e9c5c186CBA7096ad4',
     },
@@ -71,30 +43,6 @@ type BridgeType = Record<
 >;
 
 export const BRIDGE: BridgeType = {
-  [PresetTypedChainId.TangleTestnetNative]: {
-    [PresetTypedChainId.Sepolia]: {
-      supportedTokens: ['sygUSD'],
-    },
-    [PresetTypedChainId.RococoPhala]: {
-      supportedTokens: ['sygUSD'],
-    },
-  },
-  [PresetTypedChainId.RococoPhala]: {
-    [PresetTypedChainId.Sepolia]: {
-      supportedTokens: ['sygUSD'],
-    },
-    [PresetTypedChainId.TangleTestnetNative]: {
-      supportedTokens: ['sygUSD'],
-    },
-  },
-  [PresetTypedChainId.Sepolia]: {
-    [PresetTypedChainId.RococoPhala]: {
-      supportedTokens: ['sygUSD'],
-    },
-    [PresetTypedChainId.TangleTestnetNative]: {
-      supportedTokens: ['sygUSD'],
-    },
-  },
   [PresetTypedChainId.Holesky]: {
     [PresetTypedChainId.TangleTestnetEVM]: {
       supportedTokens: ['WETH'],
diff --git a/apps/tangle-dapp/context/BridgeContext.tsx b/apps/tangle-dapp/context/BridgeContext.tsx
index b7e471c6d..9fba5ad1a 100644
--- a/apps/tangle-dapp/context/BridgeContext.tsx
+++ b/apps/tangle-dapp/context/BridgeContext.tsx
@@ -26,7 +26,7 @@ import {
   BridgeType,
   BridgeWalletError,
 } from '../types/bridge';
-import { isEVMChain, isSubstrateChain } from '../utils/bridge';
+import { isEVMChain } from '../utils/bridge';
 
 const BRIDGE_SOURCE_CHAIN_OPTIONS = sortChainOptions(
   Object.keys(BRIDGE).map(
@@ -135,7 +135,6 @@ const BridgeContext = createContext<BridgeContextProps>({
 
   feeItems: {
     gas: null,
-    sygmaBridge: null,
     hyperlaneInterchain: null,
   },
   updateFeeItem: () => {
@@ -163,7 +162,6 @@ const BridgeProvider: FC<PropsWithChildren> = ({ children }) => {
     Record<BridgeFeeType, BridgeFeeItem | null>
   >({
     gas: null,
-    sygmaBridge: null,
     hyperlaneInterchain: null,
   });
 
@@ -225,34 +223,9 @@ const BridgeProvider: FC<PropsWithChildren> = ({ children }) => {
       isEVMChain(selectedSourceChain) &&
       isEVMChain(selectedDestinationChain)
     ) {
-      // TODO: Temporarily get Hyperlane for EVM to EVM
       return BridgeType.HYPERLANE_EVM_TO_EVM;
     }
 
-    // EVM to Substrate
-    if (
-      isEVMChain(selectedSourceChain) &&
-      isSubstrateChain(selectedDestinationChain)
-    ) {
-      return BridgeType.SYGMA_EVM_TO_SUBSTRATE;
-    }
-
-    // Substrate to EVM
-    if (
-      isSubstrateChain(selectedSourceChain) &&
-      isEVMChain(selectedDestinationChain)
-    ) {
-      return BridgeType.SYGMA_SUBSTRATE_TO_EVM;
-    }
-
-    // Substrate to Substrate
-    if (
-      isSubstrateChain(selectedSourceChain) &&
-      isSubstrateChain(selectedDestinationChain)
-    ) {
-      return BridgeType.SYGMA_SUBSTRATE_TO_SUBSTRATE;
-    }
-
     return null;
   }, [selectedSourceChain, selectedDestinationChain]);
 
@@ -281,7 +254,6 @@ const BridgeProvider: FC<PropsWithChildren> = ({ children }) => {
   const clearFeeItems = useCallback(() => {
     setFeeItems({
       gas: null,
-      sygmaBridge: null,
       hyperlaneInterchain: null,
     });
   }, []);
@@ -315,38 +287,14 @@ const BridgeProvider: FC<PropsWithChildren> = ({ children }) => {
   }, [selectedTokenId, tokenIdOptions]);
 
   useEffect(() => {
-    if (
-      activeWallet?.platform === 'Substrate' &&
-      isEVMChain(selectedSourceChain)
-    ) {
-      setWalletError(BridgeWalletError.WalletMismatchEvm);
-      return;
-    }
-
     if (
       activeWallet?.platform === 'EVM' &&
-      isSubstrateChain(selectedSourceChain)
-    ) {
-      setWalletError(BridgeWalletError.WalletMismatchSubstrate);
-      return;
-    }
-
-    if (
-      isEVMChain(selectedSourceChain) &&
       activeChain?.id !== selectedSourceChain.id
     ) {
       setWalletError(BridgeWalletError.NetworkMismatchEvm);
       return;
     }
 
-    if (
-      isSubstrateChain(selectedSourceChain) &&
-      activeChain?.id !== selectedSourceChain.id
-    ) {
-      setWalletError(BridgeWalletError.NetworkMismatchSubstrate);
-      return;
-    }
-
     setWalletError(null);
   }, [activeWallet?.platform, selectedSourceChain, activeChain]);
 
diff --git a/apps/tangle-dapp/context/BridgeTxQueueContext.tsx b/apps/tangle-dapp/context/BridgeTxQueueContext.tsx
index 07002d251..7eaccb78a 100644
--- a/apps/tangle-dapp/context/BridgeTxQueueContext.tsx
+++ b/apps/tangle-dapp/context/BridgeTxQueueContext.tsx
@@ -22,7 +22,6 @@ interface BridgeTxQueueContextProps {
   txQueue: BridgeQueueTxItem[];
   addTxToQueue: (tx: Omit<BridgeQueueTxItem, 'state'>) => void;
   deleteTxFromQueue: (txHash: string) => void;
-  addSygmaTxId: (txHash: string, sygmaTxId: string) => void;
   addTxExplorerUrl: (txHash: string, explorerUrl: string) => void;
   updateTxState: (txHash: string, state: BridgeTxState) => void;
   updateTxDestinationTxState: (
@@ -52,9 +51,6 @@ const BridgeTxQueueContext = createContext<BridgeTxQueueContextProps>({
   updateTxDestinationTxState: () => {
     return;
   },
-  addSygmaTxId: () => {
-    return;
-  },
   addTxExplorerUrl: () => {
     return;
   },
@@ -149,29 +145,6 @@ const BridgeTxQueueProvider: FC<PropsWithChildren> = ({ children }) => {
     [activeAccountAddress, setCachedBridgeTxQueueByAcc],
   );
 
-  const addSygmaTxId = useCallback(
-    (txHash: string, sygmaTxId: string) => {
-      if (!activeAccountAddress) return;
-      setCachedBridgeTxQueueByAcc((cache) => {
-        const currTxQueue = getTxQueueFromLocalStorage(
-          activeAccountAddress,
-          cache,
-        );
-        const updatedTxQueue = currTxQueue.map((txItem) => {
-          if (txItem.hash === txHash) {
-            return { ...txItem, sygmaTxId };
-          }
-          return txItem;
-        });
-        return {
-          ...(cache?.value ?? {}),
-          [activeAccountAddress]: updatedTxQueue,
-        };
-      });
-    },
-    [activeAccountAddress, setCachedBridgeTxQueueByAcc],
-  );
-
   const addTxExplorerUrl = useCallback(
     (txHash: string, explorerUrl: string) => {
       if (!activeAccountAddress) return;
@@ -274,7 +247,6 @@ const BridgeTxQueueProvider: FC<PropsWithChildren> = ({ children }) => {
         txQueue,
         addTxToQueue,
         deleteTxFromQueue,
-        addSygmaTxId,
         updateTxState,
         updateTxDestinationTxState,
         addTxDestinationTxExplorerUrl,
diff --git a/apps/tangle-dapp/lib/hyperlane/assembleChainMetadata.ts b/apps/tangle-dapp/lib/hyperlane/assembleChainMetadata.ts
index 45d7947aa..4d0c2cf46 100644
--- a/apps/tangle-dapp/lib/hyperlane/assembleChainMetadata.ts
+++ b/apps/tangle-dapp/lib/hyperlane/assembleChainMetadata.ts
@@ -3,6 +3,7 @@ import {
   ChainMap,
   ChainMetadata,
   ChainMetadataSchema,
+  ChainTechnicalStack,
 } from '@hyperlane-xyz/sdk';
 import { ProtocolType } from '@hyperlane-xyz/utils';
 import { z } from 'zod';
@@ -34,6 +35,17 @@ export default async function assembleChainMetadata() {
   }
 
   const chains = { ...defaultChainMetadata, ...customChainMetadata };
+
+  // Handle invalid ChainTechnicalStack values - ex: opstack
+  Object.entries(chains).forEach(([_chainName, chain]) => {
+    if (
+      typeof chain.technicalStack === 'string' &&
+      !Object.values(ChainTechnicalStack).includes(chain.technicalStack)
+    ) {
+      chain.technicalStack = ChainTechnicalStack.Other;
+    }
+  });
+
   return { chains, registry };
 }
 
diff --git a/apps/tangle-dapp/types/bridge.ts b/apps/tangle-dapp/types/bridge.ts
index 48447f1fd..45f3042d5 100644
--- a/apps/tangle-dapp/types/bridge.ts
+++ b/apps/tangle-dapp/types/bridge.ts
@@ -2,18 +2,12 @@ import type { HexString } from '@polkadot/util/types';
 import { PresetTypedChainId } from '@webb-tools/dapp-types';
 import Decimal from 'decimal.js';
 
-// NOTE: might need to add cases when Sygma SDK does not support
 export enum BridgeType {
   HYPERLANE_EVM_TO_EVM = 'hyperlane-evmToEvm',
-  SYGMA_EVM_TO_EVM = 'sygma-evmToEvm',
-  SYGMA_EVM_TO_SUBSTRATE = 'sygma-evmToSubstrate',
-  SYGMA_SUBSTRATE_TO_EVM = 'sygma-substrateToEvm',
-  SYGMA_SUBSTRATE_TO_SUBSTRATE = 'sygma-substrateToSubstrate',
 }
 
 // Supported tokens to be used in the bridge
-// TODO: remove WETH later (this is for testing Hyperlane only)
-export type BridgeTokenId = 'tTNT' | 'TNT' | 'sygUSD' | 'WETH';
+export type BridgeTokenId = 'WETH';
 
 export type ChainId = PresetTypedChainId;
 
@@ -42,7 +36,6 @@ export type BridgeTokenType = {
 
   /**
    * Address of the ERC20 contract of the token on the EVM chain
-   * TODO: might need type only for EVM Chain Id
    */
   erc20TokenContractAddress?: Partial<Record<ChainId, HexString>>;
 
@@ -55,11 +48,6 @@ export type BridgeTokenType = {
    * The id of an asset on Substrate chain pallet
    */
   substrateAssetId?: Partial<Record<ChainId, number>>;
-
-  /**
-   * The id of the token provided in the SygmaSDK docs
-   */
-  sygmaResourceId?: string;
 };
 
 export enum BridgeWalletError {
@@ -82,12 +70,6 @@ export enum BridgeTxState {
   /** The tx has failed */
   Failed = 'Failed',
 
-  /** The tx is being indexed (Sygma txs only) */
-  SygmaIndexing = 'SygmaIndexing',
-
-  /** The tx is done indexing but still pending (Sygma txs only) */
-  SygmaPending = 'SygmaPending',
-
   /** The tx is done indexing but still pending (Hyperlane txs only) */
   HyperlanePending = 'HyperlanePending',
 
@@ -106,7 +88,6 @@ export enum BridgeTxState {
 
 export type BridgeQueueTxItem = {
   hash: string;
-  sygmaTxId?: string;
   hyperlaneTxId?: string;
   env: 'live' | 'test' | 'dev';
   sourceTypedChainId: number;
@@ -127,7 +108,6 @@ export type BridgeQueueTxItem = {
 
 export enum BridgeFeeType {
   Gas = 'gas',
-  SygmaBridge = 'sygmaBridge',
   HyperlaneInterchain = 'hyperlaneInterchain',
 }
 
diff --git a/apps/tangle-dapp/utils/viemConnectorClientToEthersSigner.ts b/apps/tangle-dapp/utils/viemConnectorClientToEthersSigner.ts
index bb72c0d62..c98dd457c 100644
--- a/apps/tangle-dapp/utils/viemConnectorClientToEthersSigner.ts
+++ b/apps/tangle-dapp/utils/viemConnectorClientToEthersSigner.ts
@@ -4,7 +4,6 @@ import type { Account, Chain, Client, Transport } from 'viem';
 /**
  * Converts a Viem Connector client to an ethers signer
  * Code from https://wagmi.sh/react/guides/ethers
- * Notes: Sygma SDK currently only works with ethers version 5
  * @param client The Viem Connector client to convert
  * @returns The converted ethers signer
  */
diff --git a/apps/tangle-dapp/utils/viemNetworkClientToEthersProvider.ts b/apps/tangle-dapp/utils/viemNetworkClientToEthersProvider.ts
index 130736413..45f3fb6b6 100644
--- a/apps/tangle-dapp/utils/viemNetworkClientToEthersProvider.ts
+++ b/apps/tangle-dapp/utils/viemNetworkClientToEthersProvider.ts
@@ -4,7 +4,6 @@ import type { Chain, PublicClient, Transport } from 'viem';
 /**
  * Converts a Viem network client to an ethers provider.
  * Code from https://wagmi.sh/react/guides/ethers
- * Notes: Sygma SDK currently only works with ethers version 5
  * @param client The Viem network client to convert.
  * @returns The converted ethers provider.
  */

From 442635cff64573f90cff2e7032f71a69422b955e Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavansoratur@MacBookAir.lan>
Date: Tue, 22 Oct 2024 05:34:40 -0700
Subject: [PATCH 3/3] fix: minor ui

---
 .../app/bridge/BridgeConfirmationModal.tsx    | 48 +++++++++++++++----
 .../app/bridge/BridgeContainer.tsx            | 14 ++----
 apps/tangle-dapp/app/bridge/FeeDetails.tsx    | 32 +++++++------
 .../app/bridge/hooks/useActionButton.ts       |  2 -
 .../src/components/FeeDetails/FeeDetails.tsx  |  2 +-
 5 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
index 461b24eea..ae682c9c3 100644
--- a/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx
@@ -11,6 +11,7 @@ import {
   Typography,
   useWebbUI,
 } from '@webb-tools/webb-ui-components';
+import { shortenHex } from '@webb-tools/webb-ui-components/utils/shortenHex';
 import { FC, useCallback } from 'react';
 
 import { useBridge } from '../../context/BridgeContext';
@@ -149,33 +150,62 @@ const ConfirmationItem: FC<{
   tokenName: string;
 }> = ({ type, chainName, accAddress, amount, tokenName }) => {
   return (
-    <div className="bg-mono-20 dark:bg-mono-160 w-full space-y-2 p-4 rounded-xl">
+    <div className="bg-mono-20 dark:bg-mono-170 w-full space-y-2 p-4 rounded-xl">
       <div className="flex justify-between items-center">
-        <Typography variant="body1">
+        <Typography
+          variant="body1"
+          className="text-mono-120 dark:text-mono-120"
+          fw="bold"
+        >
           {type === 'source' ? 'From' : 'To'}
         </Typography>
         <div className="flex items-center gap-1.5">
           <ChainIcon name={chainName} />
-          <Typography variant="body1">{chainName}</Typography>
+          <Typography
+            variant="body1"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {chainName}
+          </Typography>
         </div>
       </div>
       <div className="flex justify-between items-center">
-        <Typography variant="body1">Account</Typography>
         <Typography
           variant="body1"
-          className="max-w-[65%] break-words text-right"
+          fw="bold"
+          className="text-mono-120 dark:text-mono-120"
         >
-          {accAddress}
+          Account
+        </Typography>
+        <Typography
+          variant="body1"
+          className="max-w-[65%] break-words text-right text-mono-200 dark:text-mono-0"
+        >
+          {shortenHex(accAddress, 5)}
         </Typography>
       </div>
       <div className="flex justify-between items-center">
-        <Typography variant="body1">Amount</Typography>
+        <Typography
+          variant="body1"
+          fw="bold"
+          className="text-mono-120 dark:text-mono-120"
+        >
+          Amount
+        </Typography>
         <div className="flex items-center gap-1.5">
-          <Typography variant="body1" fw="bold">
+          <Typography
+            variant="body1"
+            className="text-mono-200 dark:text-mono-0"
+          >
             {amount}
           </Typography>
           <TokenIcon name={tokenName} />
-          <Typography variant="body1">{tokenName}</Typography>
+          <Typography
+            variant="body1"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {tokenName}
+          </Typography>
         </div>
       </div>
     </div>
diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
index 7b3791b4e..41c9c22a2 100644
--- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
@@ -32,16 +32,10 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
   } = useBridge();
   const activeAccountAddress = useActiveAccountAddress();
   const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
-  const {
-    buttonAction,
-    buttonText,
-    buttonLoadingText,
-    isLoading,
-    isDisabled,
-    // errorMessage,
-  } = useActionButton({
-    handleOpenConfirmModal: () => setIsConfirmModalOpen(true),
-  });
+  const { buttonAction, buttonText, buttonLoadingText, isLoading, isDisabled } =
+    useActionButton({
+      handleOpenConfirmModal: () => setIsConfirmModalOpen(true),
+    });
 
   const hideFeeDetails = useMemo(
     () =>
diff --git a/apps/tangle-dapp/app/bridge/FeeDetails.tsx b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
index 5dc3fb81e..722ac2133 100644
--- a/apps/tangle-dapp/app/bridge/FeeDetails.tsx
+++ b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
@@ -41,17 +41,19 @@ const FeeDetails = () => {
       isDefaultOpen={true}
       items={
         [
-          feeItems.hyperlaneInterchain !== null && {
-            name: 'Interchain Fee',
-            value: (
-              <FeeValueCmp
-                fee={feeItems.hyperlaneInterchain.amount}
-                symbol={feeItems.hyperlaneInterchain.symbol}
-              />
-            ),
-            isLoading: feeItems.hyperlaneInterchain.isLoading,
-            info: "This transaction will charge a bridge fee to cover the destination chain's gas fee.",
-          },
+          feeItems.hyperlaneInterchain !== null &&
+            feeItems.hyperlaneInterchain.amount !== null &&
+            !feeItems.hyperlaneInterchain.amount.isZero() && {
+              name: 'Interchain Fee',
+              value: (
+                <FeeValueCmp
+                  fee={feeItems.hyperlaneInterchain.amount}
+                  symbol={feeItems.hyperlaneInterchain.symbol}
+                />
+              ),
+              isLoading: feeItems.hyperlaneInterchain.isLoading,
+              info: "This transaction will charge a bridge fee to cover the destination chain's gas fee.",
+            },
           destChainTransactionFee !== null
             ? {
                 name: 'Bridge Fee',
@@ -76,9 +78,9 @@ const FeeDetails = () => {
           },
         ].filter((item) => Boolean(item)) as Array<FeeItem>
       }
-      className="!bg-mono-20 dark:!bg-mono-170"
-      titleClassName="!text-mono-100 dark:!text-mono-80"
-      itemTitleClassName="!text-mono-100 dark:!text-mono-80"
+      className="!bg-mono-20 dark:!bg-mono-170 mb-6"
+      titleClassName="!text-mono-120 dark:!text-mono-120"
+      itemTitleClassName="!text-mono-120 dark:!text-mono-120"
     />
   );
 };
@@ -90,7 +92,7 @@ const FeeValueCmp: FC<{ fee: Decimal | null; symbol: string }> = ({
   symbol,
 }) => {
   return (
-    <Typography variant="body1" className="!text-mono-120 dark:!text-mono-100">
+    <Typography variant="body1" className="!text-mono-200 dark:!text-mono-0">
       {fee ? `${fee.toDecimalPlaces(5).toString()} ${symbol}` : 'N/A'}
     </Typography>
   );
diff --git a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
index d982835e9..82623e566 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
@@ -48,8 +48,6 @@ export default function useActionButton({
     setDestinationAddress,
   } = useBridge();
 
-  console.debug('feeItems', feeItems);
-
   const isNoActiveAccountOrWallet = useMemo(() => {
     return !activeAccount || !activeWallet;
   }, [activeAccount, activeWallet]);
diff --git a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
index 088191a07..7fe035d7f 100644
--- a/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
+++ b/libs/webb-ui-components/src/components/FeeDetails/FeeDetails.tsx
@@ -157,7 +157,7 @@ const FeeDetails = forwardRef<HTMLDivElement, FeeDetailsProps>(
                   index,
                 ) => (
                   <div
-                    className="flex items-center justify-between text-mono-120 dark:text-mono-100"
+                    className="flex items-center justify-between text-mono-120 dark:text-mono-120"
                     key={`${name}-${index}`}
                   >
                     <div className="flex items-center gap-[2px] !text-current">