Approximate fee for Mayan Swift quotes (wormhole-foundation#2562)

* calculate Mayan Swift fees using dummy math

* UX: clarify the fee is a network cost

* clarify code

* rename to Network cost

* fix mistake (wrong name)

* guard against non-positive number

* explain manual routes arent a free lunch

* hack to hide token symbol for Mayan

* remove parens

* fix font size

* apply this logic to all Mayan quotes

* fix typo

* remove !s

* bump mayan route :)

* shh is ok

wormhole-connect/package.json

@@ -33,7 +33,7 @@
  "@ledgerhq/hw-transport-webhid": "6.27.1",
  "@ledgerhq/logs": "6.12.0",
  "@manahippo/aptos-wallet-adapter": "^1.0.8",
- "@mayanfinance/wormhole-sdk-route": "^0.4.0",
+ "@mayanfinance/wormhole-sdk-route": "^0.4.1",
  "@mui/icons-material": "^5.11.0",
  "@mui/material": "^5.11.4",
  "@mysten/sui.js": "^0.32.2",

wormhole-connect/src/components/DemoApp/index.tsx

@@ -53,7 +53,7 @@ const parseConfig = (config: string): WormholeConnectConfig => {
  /* @ts-ignore */
  window.TokenBridgeRoute = routes.TokenBridgeRoute;
  /* @ts-ignore */
- window.ManualCCTPRoute = routes.ManualCCTPRoute;
+ window.CCTPRoute = routes.CCTPRoute;
  /* @ts-ignore */
  window.MayanRoute = MayanRoute;
  /* @ts-ignore */
@@ -191,7 +191,7 @@ function DemoApp() {
  <i>{'RouteConstructor'}</i>
  </li>
  <li>
- <pre>ManualCCTPRoute</pre>
+ <pre>CCTPRoute</pre>
  <i>{'RouteConstructor'}</i>
  </li>
  <li>

wormhole-connect/src/hooks/useRoutesQuotesBulk.ts

@@ -1,7 +1,14 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import type { RootState } from 'store';
-import { Chain, routes } from '@wormhole-foundation/sdk';
+import {
+ Wormhole,
+ Chain,
+ Network,
+ routes,
+ circle,
+ amount,
+} from '@wormhole-foundation/sdk';
 import { QuoteParams } from 'routes/operator';
 import { calculateUSDPriceRaw } from 'utils';
 
@@ -23,6 +30,8 @@ type HookReturn = {
  isFetching: boolean;
 };
 
+const MAYAN_SWIFT_LIMIT = 1000; // USD
+
 const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
  const [isFetching, setIsFetching] = useState(false);
  const [quotes, setQuotes] = useState<QuoteResult[]>([]);
@@ -82,17 +91,56 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
  [routes.join(), quotes],
  );
 
- // TODO temporary
+ // TODO temporary logic for beta Mayan support
  const mayanQuote = quotesMap['MayanSwap'];
- if (usdAmount !== undefined && usdAmount > 1000 && mayanQuote !== undefined) {
- if (
- mayanQuote.success &&
- mayanQuote.details?.type.toLowerCase() === 'swift'
- ) {
+ if (
+ mayanQuote !== undefined &&
+ mayanQuote.success &&
+ mayanQuote.details?.type.toLowerCase() === 'swift'
+ ) {
+ // There are two special cases here for Mayan Swift transfers
+ //
+ // 1) Disallow transfers >$1000 (temporary, while in beta)
+ // 2) For transfers <=$1000, calculate network costs manually, because Mayan API doesn't
+ // expose relayer fee info for Swift quotes.
+ //
+ // TODO all of the code here is horrible and would ideally not exist
+
+ if (usdAmount !== undefined && usdAmount > MAYAN_SWIFT_LIMIT) {
+ // Temporarily disallow Swift quotes above $1000
+ // TODO revisit this
  quotesMap['MayanSwap'] = {
  success: false,
- error: new Error('Amount exceeds limit of $1000 USD'),
+ error: new Error(`Amount exceeds limit of $${MAYAN_SWIFT_LIMIT} USD`),
  };
+ } else {
+ const approxInputUsdValue = calculateUSDPriceRaw(
+ params.amount,
+ usdPrices.data,
+ tokenConfig,
+ );
+ const approxOutputUsdValue = calculateUSDPriceRaw(
+ amount.display(mayanQuote.destinationToken.amount),
+ usdPrices.data,
+ config.tokens[params.destToken],
+ );
+
+ if (approxInputUsdValue && approxOutputUsdValue) {
+ const approxUsdNetworkCost = approxInputUsdValue - approxOutputUsdValue;
+
+ if (!isNaN(approxUsdNetworkCost) && approxUsdNetworkCost > 0) {
+ (quotesMap['MayanSwap'] as routes.Quote<Network>).relayFee = {
+ token: {
+ chain: 'Solana' as Chain,
+ address: Wormhole.parseAddress(
+ 'Solana',
+ circle.usdcContract.get('Mainnet', 'Solana') as string,
+ ),
+ },
+ amount: amount.parse(amount.denoise(approxUsdNetworkCost, 6), 6),
+ };
+ }
+ }
  }
  }
 

wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx

@@ -47,6 +47,7 @@ type Props = {
 const SingleRoute = (props: Props) => {
  const { classes } = useStyles();
  const theme = useTheme();
+ const routeConfig = config.routes.get(props.route.name);
 
  const {
  toChain: destChain,
@@ -68,6 +69,10 @@ const SingleRoute = (props: Props) => {
  );
 
  const relayerFee = useMemo(() => {
+ if (!routeConfig.AUTOMATIC_DEPOSIT) {
+ return <>You pay gas on {destChain}</>;
+ }
+
  if (!quote?.relayFee) {
  return <></>;
  }
@@ -95,19 +100,25 @@ const SingleRoute = (props: Props) => {
  return <></>;
  }
 
+ let feeValue = isFetchingQuote ? (
+ <CircularProgress size={14} />
+ ) : (
+ <Typography fontSize={14}>{`${toFixedDecimals(relayFee.toString(), 4)} ${
+ feeTokenConfig.symbol
+ } (${feePrice})`}</Typography>
+ );
+
+ // Wesley made me do it
+ if (props.route.name === 'MayanSwap') {
+ feeValue = <Typography fontSize={14}>{`${feePrice}`}</Typography>;
+ }
+
  return (
  <Stack direction="row" justifyContent="space-between">
  <Typography color={theme.palette.text.secondary} fontSize={14}>
- Relayer fee
+ Network cost
  </Typography>
- {isFetchingQuote ? (
- <CircularProgress size={14} />
- ) : (
- <Typography fontSize={14}>{`${toFixedDecimals(
- relayFee.toString(),
- 4,
- )} ${feeTokenConfig.symbol} (${feePrice})`}</Typography>
- )}
+ {feeValue}
  </Stack>
  );
  }, [destToken, isFetchingQuote, quote?.relayFee, tokenPrices]);
@@ -168,8 +179,6 @@ const SingleRoute = (props: Props) => {
  return false;
  }
 
- const routeConfig = config.routes.get(props.route.name);
-
  return !routeConfig.AUTOMATIC_DEPOSIT;
  }, [props.route.name]);