Merge branch 'yuri/list-parachain-pools-in-table' of https://github.c…

…om/webb-tools/webb-dapp into yuri/list-parachain-pools-in-table

.github/CODEOWNERS

@@ -3,4 +3,4 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence,
 # they will be requested for review when someone opens a pull request.
-*       @AtelyPham @devpavan04 @yurixander
+*       @AtelyPham @devpavan04 @yurixander

.lycheeignore

@@ -43,3 +43,5 @@ https://www.conventionalcommits.org/en/v1.0.0/
 
 # Files
 /**/CHANGELOG.md
+
+https://stats.tangle.tools

apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx

@@ -32,7 +32,7 @@ const AmountAndTokenInput: FC = () => {
     tokenIdOptions,
     setIsAmountInputError,
     isAmountInputError,
-    bridgeFee,
+    feeItems,
   } = useBridge();
   const selectedToken = useSelectedToken();
   const { balance, isLoading } = useBalance();
@@ -47,12 +47,12 @@ const AmountAndTokenInput: FC = () => {
 
     return (existentialDeposit ?? new Decimal(0))
       .add(destChainTransactionFee ?? new Decimal(0))
-      .add(bridgeFee ?? new Decimal(0));
+      .add(feeItems.sygmaBridge?.amount ?? new Decimal(0));
   }, [
     selectedToken.existentialDeposit,
     selectedToken.destChainTransactionFee,
     sourceTypedChainId,
-    bridgeFee,
+    feeItems.sygmaBridge?.amount,
   ]);
 
   return (

apps/tangle-dapp/app/bridge/BridgeConfirmationModal.tsx

@@ -17,9 +17,8 @@ import { useBridgeTxQueue } from '../../context/BridgeTxQueueContext';
 import useActiveAccountAddress from '../../hooks/useActiveAccountAddress';
 import FeeDetails from './FeeDetails';
 import useAmountInDecimals from './hooks/useAmountInDecimals';
-import useBridgeFee from './hooks/useBridgeFee';
 import useBridgeTransfer from './hooks/useBridgeTransfer';
-import useEstimatedGasFee from './hooks/useEstimatedGasFee';
+import useFees from './hooks/useFees';
 import useSelectedToken from './hooks/useSelectedToken';
 
 interface BridgeConfirmationModalProps {
@@ -40,18 +39,15 @@ const BridgeConfirmationModal: FC<BridgeConfirmationModalProps> = ({
     destinationAddress,
     setAmount,
     setDestinationAddress,
-    bridgeFee,
-    isBridgeFeeLoading,
-    isEstimatedGasFeeLoading,
     isTransferring,
     setIsTransferring,
+    feeItems,
   } = useBridge();
   const selectedToken = useSelectedToken();
   const { sourceAmountInDecimals, destinationAmountInDecimals } =
     useAmountInDecimals();
 
-  useBridgeFee();
-  useEstimatedGasFee();
+  useFees();
 
   const cleanUpWhenSubmit = useCallback(() => {
     handleClose();
@@ -122,9 +118,10 @@ const BridgeConfirmationModal: FC<BridgeConfirmationModalProps> = ({
               handleClose(); // TODO: handle clear form
             }}
             isDisabled={
-              isBridgeFeeLoading ||
-              isEstimatedGasFeeLoading ||
-              bridgeFee === null ||
+              feeItems.sygmaBridge?.isLoading ||
+              feeItems.hyperlaneInterchain?.isLoading ||
+              feeItems.gas?.isLoading ||
+              feeItems.gas?.amount === null ||
               !sourceAmountInDecimals ||
               !destinationAmountInDecimals ||
               !destinationAddress

apps/tangle-dapp/app/bridge/BridgeContainer.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
-import InfoIconWithTooltip from '@webb-tools/webb-ui-components/components/IconWithTooltip/InfoIconWithTooltip';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { FC, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -40,7 +38,7 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
     buttonLoadingText,
     isLoading,
     isDisabled,
-    errorMessage,
+    // errorMessage,
   } = useActionButton({
     handleOpenConfirmModal: () => setIsConfirmModalOpen(true),
   });
@@ -72,8 +70,8 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
           className,
         )}
       >
-        <div className="flex-1 w-full flex flex-col justify-between">
-          <div className="space-y-8">
+        <div className="flex flex-col justify-between flex-1">
+          <div className="flex flex-col gap-10">
             <ChainSelectors />
 
             <AmountAndTokenInput />
@@ -96,8 +94,9 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
 
             {!hideFeeDetails && <FeeDetails />}
           </div>
+
           <div className="flex flex-col items-end gap-2">
-            {errorMessage && (
+            {/* {errorMessage && (
               <div className="flex items-center gap-1">
                 <Typography
                   variant="body2"
@@ -113,7 +112,7 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
                   />
                 )}
               </div>
-            )}
+            )} */}
             <Button
               isFullWidth
               isDisabled={isDisabled}

apps/tangle-dapp/app/bridge/FeeDetails.tsx

@@ -11,13 +11,7 @@ import useSelectedToken from './hooks/useSelectedToken';
 import useTypedChainId from './hooks/useTypedChainId';
 
 const FeeDetails = () => {
-  const {
-    selectedSourceChain,
-    bridgeFee,
-    isBridgeFeeLoading,
-    estimatedGasFee,
-    isEstimatedGasFeeLoading,
-  } = useBridge();
+  const { selectedSourceChain, feeItems } = useBridge();
   const selectedToken = useSelectedToken();
   const { destinationTypedChainId } = useTypedChainId();
 
@@ -27,45 +21,46 @@ const FeeDetails = () => {
     [destinationTypedChainId, selectedToken.destChainTransactionFee],
   );
 
-  const totalFeeCmp = useMemo(() => {
-    if (bridgeFee === null || estimatedGasFee === null) return null;
-
-    const allTokenFee = bridgeFee.add(
-      destChainTransactionFee ?? new Decimal(0),
-    );
-
-    if (
-      selectedToken.symbol.toLowerCase() ===
-      selectedSourceChain.nativeCurrency.symbol.toLowerCase()
-    ) {
-      const totalFee = allTokenFee.add(estimatedGasFee);
-      if (totalFee.isZero()) return null;
-      return `${totalFee.toString()} ${selectedToken.symbol}`;
-    }
-
-    return `${allTokenFee.toDecimalPlaces(5).toString()} ${selectedToken.symbol} + ${estimatedGasFee.toDecimalPlaces(5).toString()} ${selectedSourceChain.nativeCurrency.symbol}`;
-  }, [
-    bridgeFee,
-    destChainTransactionFee,
-    selectedToken.symbol,
-    estimatedGasFee,
-    selectedSourceChain.nativeCurrency.symbol,
-  ]);
+  const totalFeeCmp = useMemo(
+    () =>
+      formatTotalAmount({
+        ...feeItems,
+        destChainTransactionFee:
+          destChainTransactionFee !== null
+            ? { amount: destChainTransactionFee, symbol: selectedToken.symbol }
+            : null,
+      }),
+    [feeItems, destChainTransactionFee, selectedToken.symbol],
+  );
 
   return (
     <FeeDetailsCmp
       title="Fees"
       totalFeeCmp={totalFeeCmp}
-      collapsible={false}
-      value="fee-details"
+      collapsible={true}
+      isDefaultOpen={true}
       items={
         [
-          {
+          feeItems.sygmaBridge !== null && {
             name: 'Bridge Fee',
             value: (
-              <FeeValueCmp fee={bridgeFee} symbol={selectedToken.symbol} />
+              <FeeValueCmp
+                fee={feeItems.sygmaBridge.amount}
+                symbol={feeItems.sygmaBridge.symbol}
+              />
             ),
-            isLoading: isBridgeFeeLoading,
+            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: (
+              <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
@@ -84,11 +79,11 @@ const FeeDetails = () => {
             name: 'Estimated Gas Fee',
             value: (
               <FeeValueCmp
-                fee={estimatedGasFee}
+                fee={feeItems.gas?.amount ?? null}
                 symbol={selectedSourceChain.nativeCurrency.symbol}
               />
             ),
-            isLoading: isEstimatedGasFeeLoading,
+            isLoading: feeItems.gas?.isLoading ?? false,
           },
         ].filter((item) => Boolean(item)) as Array<FeeItem>
       }
@@ -111,3 +106,26 @@ const FeeValueCmp: FC<{ fee: Decimal | null; symbol: string }> = ({
     </Typography>
   );
 };
+
+function formatTotalAmount(
+  feeItems: Record<string, { amount: Decimal | null; symbol: string } | null>,
+): string {
+  const symbolTotals: Record<string, Decimal> = {};
+
+  for (const [, item] of Object.entries(feeItems)) {
+    if (item === null) continue;
+    const { amount, symbol } = item;
+    if (!amount) continue;
+    symbolTotals[symbol] = (symbolTotals[symbol] ?? new Decimal(0)).plus(
+      amount,
+    );
+  }
+
+  const formattedTotals = Object.entries(symbolTotals)
+    .map(
+      ([symbol, amount]) => `${amount.toDecimalPlaces(5).toString()} ${symbol}`,
+    )
+    .join(' + ');
+
+  return formattedTotals;
+}