feat(ui): Calculate gas fee in USD

apps/ui/src/components/AddForm.tsx

@@ -34,6 +34,7 @@ import { captureAndWrapException } from "../errors";
 import {
   useAddFeesEstimationQuery,
   useAddFeesEstimationQueryV2,
+  useCoinGeckoPricesQuery,
   useMultipleUserBalances,
   usePool,
   usePoolMath,
@@ -259,6 +260,9 @@ export const AddForm = ({
     lpTargetEcosystem,
   );
 
+  const { data: prices = new Map<TokenConfig["id"], Decimal | null>() } =
+    useCoinGeckoPricesQuery();
+
   const hasPositiveInputAmount = inputAmounts.some(
     (amount) => amount && !amount.isZero(),
   );
@@ -601,6 +605,7 @@ export const AddForm = ({
           feesEstimation={
             poolSpec.isLegacyPool ? feesEstimation : feesEstimationV2
           }
+          prices={prices}
         />
       )}
 

apps/ui/src/components/EstimatedTxFeesCallout.tsx

@@ -13,15 +13,19 @@ import type { FeesEstimation } from "../models";
 
 interface Props {
   readonly feesEstimation: Partial<FeesEstimation> | null;
+  readonly prices: ReadonlyMap<string, Decimal | null> | null;
 }
 
-export const EstimatedTxFeesCallout: FC<Props> = ({ feesEstimation }) => {
+export const EstimatedTxFeesCallout: FC<Props> = ({
+  feesEstimation,
+  prices,
+}) => {
   const { t } = useTranslation();
   const numberFormatter = useIntlNumberFormatter({
     maximumSignificantDigits: 4,
   });
   const config = useEnvironment(selectConfig, shallow);
-  if (feesEstimation === null) {
+  if (feesEstimation === null || prices === null) {
     return (
       <>
         <EuiCallOut iconType="visGauge" size="s" style={{ paddingLeft: 12 }}>
@@ -62,11 +66,17 @@ export const EstimatedTxFeesCallout: FC<Props> = ({ feesEstimation }) => {
           {txFeeArray.map(({ ecosystemId, txFee }) => {
             const { displayName, nativeTokenSymbol } =
               config.ecosystems[ecosystemId];
+            const maybePrice = prices.get(nativeTokenSymbol);
             return (
               <li key={ecosystemId}>
                 {displayName}
                 {": ~"}
                 {numberFormatter.format(txFee.toNumber())} {nativeTokenSymbol}
+                &nbsp;
+                {maybePrice &&
+                  `($${numberFormatter.format(
+                    txFee.times(maybePrice).toNumber(),
+                  )})`}
               </li>
             );
           })}

apps/ui/src/components/RemoveForm.tsx

@@ -36,6 +36,7 @@ import { selectConfig } from "../core/selectors";
 import { useEnvironment, useNotification } from "../core/store";
 import { captureAndWrapException } from "../errors";
 import {
+  useCoinGeckoPricesQuery,
   usePool,
   usePoolMath,
   useRemoveFeesEstimationQuery,
@@ -278,6 +279,9 @@ export const RemoveForm = ({
     lpTokenSourceEcosystem,
   );
 
+  const { data: prices = new Map<TokenConfig["id"], Decimal | null>() } =
+    useCoinGeckoPricesQuery();
+
   const hasPositiveOutputAmount = outputAmounts.some(
     (amount) => amount && !amount.isZero(),
   );
@@ -849,6 +853,7 @@ export const RemoveForm = ({
           feesEstimation={
             poolSpec.isLegacyPool ? feesEstimation : feesEstimationV2
           }
+          prices={prices}
         />
       )}
 

apps/ui/src/components/SwapForm/SwapForm.tsx

@@ -6,6 +6,7 @@ import {
   EuiFormRow,
   EuiSpacer,
 } from "@elastic/eui";
+import type { TokenConfig } from "@swim-io/core/types";
 import { EvmEcosystemId } from "@swim-io/evm";
 import { SOLANA_ECOSYSTEM_ID } from "@swim-io/solana";
 import { TOKEN_PROJECTS_BY_ID } from "@swim-io/token-projects";
@@ -20,6 +21,7 @@ import { selectConfig } from "../../core/selectors";
 import { useEnvironment, useNotification } from "../../core/store";
 import { captureAndWrapException } from "../../errors";
 import {
+  useCoinGeckoPricesQuery,
   useGetSwapFormErrors,
   useIsLargeSwap,
   usePoolMaths,
@@ -98,6 +100,8 @@ export const SwapForm = ({ maxSlippageFraction }: Props): ReactElement => {
   );
 
   const feesEstimation = useSwapFeesEstimationQuery(fromToken, toToken);
+  const { data: prices = new Map<TokenConfig["id"], Decimal | null>() } =
+    useCoinGeckoPricesQuery();
   const userNativeBalances = useUserNativeBalances([
     fromToken.nativeEcosystemId,
     toToken.nativeEcosystemId,
@@ -298,7 +302,10 @@ export const SwapForm = ({ maxSlippageFraction }: Props): ReactElement => {
         toEcosystem={toToken.nativeEcosystemId}
       />
       {isInputAmountPositive && (
-        <EstimatedTxFeesCallout feesEstimation={feesEstimation} />
+        <EstimatedTxFeesCallout
+          feesEstimation={feesEstimation}
+          prices={prices}
+        />
       )}
       {formErrors.length > 0 && (
         <>

apps/ui/src/components/SwapFormV2/SwapFormV2.tsx

@@ -16,11 +16,13 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import shallow from "zustand/shallow.js";
 
+import type { TokenConfig } from "../../config";
 import { getTokenDetailsForEcosystem } from "../../config";
 import { selectConfig } from "../../core/selectors";
 import { useEnvironment, useNotification } from "../../core/store";
 import { captureAndWrapException } from "../../errors";
 import {
+  useCoinGeckoPricesQuery,
   useGetSwapFormErrorsV2,
   useIsLargeSwapV2,
   useIsRequiredPoolPaused,
@@ -97,6 +99,9 @@ export const SwapFormV2 = ({ maxSlippageFraction }: Props): ReactElement => {
     toTokenOption,
   );
 
+  const { data: prices = new Map<TokenConfig["id"], Decimal | null>() } =
+    useCoinGeckoPricesQuery();
+
   const inputAmount = defaultIfError(
     () => new Decimal(formInputAmount.replace(/,/g, "")),
     new Decimal(0),
@@ -311,7 +316,10 @@ export const SwapFormV2 = ({ maxSlippageFraction }: Props): ReactElement => {
       <EuiSpacer />
 
       {isInputAmountPositive && (
-        <EstimatedTxFeesCallout feesEstimation={feesEstimation} />
+        <EstimatedTxFeesCallout
+          feesEstimation={feesEstimation}
+          prices={prices}
+        />
       )}
 
       {formErrors.length > 0 && (

apps/ui/src/hooks/crossEcosystem/useCoinGeckoPriceQuery.ts

@@ -17,6 +17,13 @@ const COINGECKO_ID_TO_TOKEN_IDS: ReadonlyRecord<string, readonly string[]> = {
   "green-satoshi-token": ["mainnet-solana-gst"],
   "green-satoshi-token-bsc": ["mainnet-bnb-gst"],
   stepn: ["mainnet-solana-gmt", "mainnet-bnb-gmt"], // NOTE: These are fungible via a non-Wormhole route
+  // The following Token IDs are an ecosystem's nativeTokenSymbol.
+  "avalanche-2": ["AVAX"],
+  binancecoin: ["BNB"],
+  ethereum: ["ETH"],
+  fantom: ["FTM"],
+  karura: ["KAR"],
+  "matic-network": ["MATIC"],
 };
 
 export const useCoinGeckoPricesQuery = (): UseQueryResult<
@@ -29,6 +36,7 @@ export const useCoinGeckoPricesQuery = (): UseQueryResult<
       return new Map();
     }
     const coinGeckoIds = Object.keys(COINGECKO_ID_TO_TOKEN_IDS);
+
     const url = `https://api.coingecko.com/api/v3/simple/price?ids=${coinGeckoIds.join(
       ",",
     )}&vs_currencies=USD`;

apps/ui/src/models/swim/fees.ts

@@ -13,6 +13,7 @@ export type FeesEstimation = ReadonlyRecord<EcosystemId, Decimal>;
 export const APPROVAL_CEILING = 70000;
 export const TRANSFER_CEILING = 120000;
 export const REDEEM_CEILING = 300000;
+// TODO: Include Solana in USD fee estimation once this is not hardcoded.
 export const SOLANA_FEE = new Decimal(0.01);
 const POLKADOT_EXISTENTIAL_DEPOSIT_AMOUNT = new Decimal(0.1);
 export const ZERO = new Decimal(0);