feat: token fees quote

package.json

@@ -18,9 +18,9 @@
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
     "@hyperlane-xyz/registry": "23.4.0",
-    "@hyperlane-xyz/sdk": "19.5.0",
-    "@hyperlane-xyz/utils": "19.5.0",
-    "@hyperlane-xyz/widgets": "19.5.0",
+    "@hyperlane-xyz/sdk": "19.7.0",
+    "@hyperlane-xyz/utils": "19.7.0",
+    "@hyperlane-xyz/widgets": "19.7.0",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",

src/features/transfer/FeeSectionButton.tsx

@@ -18,7 +18,7 @@ export function FeeSectionButton({
 
   return (
     <>
-      <div className="mt-2 h-2">
+      <div className="mb-2 mt-2 h-2">
         {isLoading ? (
           <Skeleton className="h-4 w-72" />
         ) : fees ? (

src/features/transfer/TransferFeeModal.tsx

@@ -61,6 +61,20 @@ export function TransferFeeModal({
             )}
           </div>
         )}
+        {fees?.tokenFeeQuote && fees.tokenFeeQuote.amount > 0n && (
+          <div className="flex gap-4">
+            <span className="flex min-w-[7.5rem] items-center gap-1">
+              Token Fee <Tooltip content="Variable fee based on amount" id="token-fee-tooltip" />
+            </span>
+            {isLoading ? (
+              <Skeleton className="h-4 w-52" />
+            ) : (
+              <span>{`${fees.tokenFeeQuote.getDecimalFormattedAmount().toFixed(8) || '0'} ${
+                fees.tokenFeeQuote.token.symbol || ''
+              }`}</span>
+            )}
+          </div>
+        )}
         <span className="mt-2">
           Read more about{' '}
           <Link

src/features/transfer/TransferTokenForm.tsx

@@ -62,7 +62,7 @@ import { useTokenPrice } from '../tokens/useTokenPrice';
 import { WalletConnectionWarning } from '../wallet/WalletConnectionWarning';
 import { FeeSectionButton } from './FeeSectionButton';
 import { RecipientConfirmationModal } from './RecipientConfirmationModal';
-import { getInterchainQuote, getTotalFee, getTransferToken } from './fees';
+import { getInterchainQuote, getLowestFeeTransferToken, getTotalFee } from './fees';
 import { useFetchMaxAmount } from './maxAmount';
 import { TransferFormValues } from './types';
 import { useRecipientBalanceWatcher } from './useBalanceWatcher';
@@ -515,7 +515,7 @@ function ButtonSection({
           disabled={!addressConfirmed}
           chainName={values.origin}
           text={isValidating ? 'Validating...' : 'Continue'}
-          classes={`${isReview ? 'mt-4' : 'mt-2'} px-3 py-1.5`}
+          classes={`${isReview ? 'mt-4' : 'mt-0'} px-3 py-1.5`}
         />
       </>
     );
@@ -696,6 +696,7 @@ function ReviewDetails({
   return (
     <>
       {!isReview && <FeeSectionButton visible={!isReview} fees={fees} isLoading={isLoading} />}
+
       <div
         className={`${
           isReview ? 'max-h-screen duration-1000 ease-in' : 'max-h-0 duration-500'
@@ -743,19 +744,27 @@ function ReviewDetails({
                   {fees?.localQuote && fees.localQuote.amount > 0n && (
                     <p className="flex">
                       <span className="min-w-[7.5rem]">Local Gas (est.)</span>
-                      <span>{`${fees.localQuote.getDecimalFormattedAmount().toFixed(4) || '0'} ${
+                      <span>{`${fees.localQuote.getDecimalFormattedAmount().toFixed(8) || '0'} ${
                         fees.localQuote.token.symbol || ''
                       }`}</span>
                     </p>
                   )}
                   {fees?.interchainQuote && fees.interchainQuote.amount > 0n && (
                     <p className="flex">
                       <span className="min-w-[7.5rem]">Interchain Gas</span>
-                      <span>{`${fees.interchainQuote.getDecimalFormattedAmount().toFixed(4) || '0'} ${
+                      <span>{`${fees.interchainQuote.getDecimalFormattedAmount().toFixed(8) || '0'} ${
                         fees.interchainQuote.token.symbol || ''
                       }`}</span>
                     </p>
                   )}
+                  {fees?.tokenFeeQuote && fees.tokenFeeQuote.amount > 0n && (
+                    <p className="flex">
+                      <span className="min-w-[7.5rem]">Token Fee</span>
+                      <span>{`${fees.tokenFeeQuote.getDecimalFormattedAmount().toFixed(8) || '0'} ${
+                        fees.tokenFeeQuote.token.symbol || ''
+                      }`}</span>
+                    </p>
+                  )}
                 </div>
               </div>
             </>
@@ -845,8 +854,20 @@ async function validateForm(
       return [{ recipient: 'Warp Route address is not valid as recipient' }, null];
     }
 
-    const transferToken = await getTransferToken(warpCore, token, destinationToken);
-    const amountWei = toWei(amount, transferToken.decimals);
+    const { address: sender, publicKey: senderPubKey } = getAccountAddressAndPubKey(
+      warpCore.multiProvider,
+      origin,
+      accounts,
+    );
+    const amountWei = toWei(amount, token.decimals);
+    const transferToken = await getLowestFeeTransferToken(
+      warpCore,
+      token,
+      destinationToken,
+      amountWei,
+      recipient,
+      sender,
+    );
     const multiCollateralLimit = isMultiCollateralLimitExceeded(token, destination, amountWei);
 
     if (multiCollateralLimit) {
@@ -858,17 +879,11 @@ async function validateForm(
       ];
     }
 
-    const { address, publicKey: senderPubKey } = getAccountAddressAndPubKey(
-      warpCore.multiProvider,
-      origin,
-      accounts,
-    );
-
     const result = await warpCore.validateTransfer({
       originTokenAmount: transferToken.amount(amountWei),
       destination,
       recipient,
-      sender: address || '',
+      sender: sender || '',
       senderPubKey: await senderPubKey,
     });
 

src/features/transfer/fees.ts

@@ -4,6 +4,7 @@ import { chainsRentEstimate } from '../../consts/chains';
 import { logger } from '../../utils/logger';
 import { getTokensWithSameCollateralAddresses, isValidMultiCollateralToken } from '../tokens/utils';
 
+// get the total amount combined of all the fees
 export function getTotalFee({
   interchainQuote,
   localQuote,
@@ -55,11 +56,14 @@ export function getInterchainQuote(
 
 // Checks if a token is a multi-collateral token and if so
 // look for other tokens that are the same and returns
-// the one with the highest collateral in the destination
-export async function getTransferToken(
+// the one with the lowest fee
+export async function getLowestFeeTransferToken(
   warpCore: WarpCore,
   originToken: Token,
   destinationToken: IToken,
+  amountWei: string,
+  recipient: string,
+  sender: string | undefined,
 ) {
   if (!isValidMultiCollateralToken(originToken, destinationToken)) return originToken;
 
@@ -73,37 +77,76 @@ export async function getTransferToken(
   if (tokensWithSameCollateralAddresses.length <= 1) return originToken;
 
   logger.debug(
-    'Multiple multi-collateral tokens found for same collateral address, retrieving balances...',
+    'Multiple multi-collateral tokens found for same collateral address, retrieving routes with collateral balance...',
   );
-  const tokenBalances: Array<{ token: Token; balance: bigint }> = [];
 
   // fetch each destination token balance
   const balanceResults = await Promise.allSettled(
     tokensWithSameCollateralAddresses.map(async ({ originToken, destinationToken }) => {
       try {
         const balance = await warpCore.getTokenCollateral(destinationToken);
-        return { token: originToken, balance };
+        return { originToken, destinationToken, balance };
       } catch {
         return null;
       }
     }),
   );
 
+  const amountWeiBigInt = BigInt(amountWei);
+  const tokenBalances: Array<{ originToken: Token; destinationToken: Token; balance: bigint }> = [];
+  // filter tokens that have lower collateral in destination than the amount
   for (const result of balanceResults) {
-    if (result.status === 'fulfilled' && result.value) {
+    if (
+      result.status === 'fulfilled' &&
+      result.value?.balance &&
+      result.value.balance >= amountWeiBigInt
+    ) {
       tokenBalances.push(result.value);
     }
   }
-
   if (!tokenBalances.length) return originToken;
 
-  // sort by balance to return the highest one
-  tokenBalances.sort((a, b) => {
-    if (a.balance > b.balance) return -1;
-    else if (a.balance < b.balance) return 1;
-    else return 0;
+  logger.debug('Retrieving fees for multi-collateral routes...');
+  // fetch each route fees
+  const feeResults = await Promise.allSettled(
+    tokenBalances.map(async ({ originToken, destinationToken }) => {
+      try {
+        const originTokenAmount = new TokenAmount(amountWei, originToken);
+        const fees = await warpCore.getInterchainTransferFee({
+          originTokenAmount,
+          destination: destinationToken.chainName,
+          recipient,
+          sender,
+        });
+        return { token: originToken, fees };
+      } catch {
+        return null;
+      }
+    }),
+  );
+
+  const tokenFees: Array<{ token: Token; tokenFee?: TokenAmount }> = [];
+  for (const result of feeResults) {
+    if (result.status === 'fulfilled' && result.value) {
+      tokenFees.push({ token: result.value.token, tokenFee: result.value.fees.tokenFeeQuote });
+    }
+  }
+  if (!tokenFees.length) return originToken;
+
+  // sort by token fees, no fees routes take precedence, then lowest fee to highest
+  tokenFees.sort((a, b) => {
+    const aFee = a.tokenFee?.amount;
+    const bFee = b.tokenFee?.amount;
+
+    if (aFee === undefined && bFee !== undefined) return -1;
+    if (aFee !== undefined && bFee === undefined) return 1;
+    if (aFee === undefined && bFee === undefined) return 0;
+
+    if (aFee! < bFee!) return -1;
+    if (aFee! > bFee!) return 1;
+    return 0;
   });
 
-  logger.debug('Found route with higher collateral in destination, switching route...');
-  return tokenBalances[0].token;
+  logger.debug('Found route with lower fee, switching route...');
+  return tokenFees[0].token;
 }

src/features/transfer/maxAmount.ts

@@ -1,4 +1,4 @@
-import { MultiProtocolProvider, TokenAmount, WarpCore } from '@hyperlane-xyz/sdk';
+import { MultiProtocolProvider, Token, TokenAmount, WarpCore } from '@hyperlane-xyz/sdk';
 import { ProtocolType } from '@hyperlane-xyz/utils';
 import { AccountInfo, getAccountAddressAndPubKey } from '@hyperlane-xyz/widgets';
 import { useMutation } from '@tanstack/react-query';
@@ -7,6 +7,7 @@ import { logger } from '../../utils/logger';
 import { useMultiProvider } from '../chains/hooks';
 import { isMultiCollateralLimitExceeded } from '../limits/utils';
 import { useWarpCore } from '../tokens/hooks';
+import { getLowestFeeTransferToken } from './fees';
 
 interface FetchMaxParams {
   accounts: Record<ProtocolType, AccountInfo>;
@@ -34,11 +35,26 @@ async function fetchMaxAmount(
   try {
     const { address, publicKey } = getAccountAddressAndPubKey(multiProvider, origin, accounts);
     if (!address) return balance;
+    const originToken = new Token(balance.token);
+    const destinationToken = originToken.getConnectionForChain(destination)?.token;
+    if (!destinationToken) return undefined;
+
+    const transferToken = await getLowestFeeTransferToken(
+      warpCore,
+      originToken,
+      destinationToken,
+      balance.amount.toString(),
+      address,
+      address,
+    );
+    const tokenAmount = new TokenAmount(balance.amount, transferToken);
     const maxAmount = await warpCore.getMaxTransferAmount({
-      balance,
+      balance: tokenAmount,
       destination,
       sender: address,
       senderPubKey: await publicKey,
+      // defaulting to address here for recipient
+      recipient: address,
     });
 
     const multiCollateralLimit = isMultiCollateralLimitExceeded(