Display relayer fee token (#2549)

Author: kev1n-peters

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

@@ -19,6 +19,7 @@ import { isEmptyObject, calculateUSDPrice, millisToHumanString } from 'utils';
 import type { RouteData } from 'config/routes';
 import type { RootState } from 'store';
 import { formatBalance } from 'store/transferInput';
+import { toFixedDecimals } from 'utils/balance';
 
 const useStyles = makeStyles()((theme: any) => ({
   container: {
@@ -63,7 +64,7 @@ const SingleRoute = (props: Props) => {
 
   const destTokenConfig = useMemo(() => config.tokens[destToken], [destToken]);
 
-  const bridgeFee = useMemo(() => {
+  const relayerFee = useMemo(() => {
     if (!quote?.relayFee) {
       return <></>;
     }
@@ -76,26 +77,33 @@ const SingleRoute = (props: Props) => {
       Object.values(config.tokens),
     );
 
-    const bridgePrice = calculateUSDPrice(
+    if (!feeTokenConfig) {
+      return <></>;
+    }
+
+    const feePrice = calculateUSDPrice(
       relayFee,
       tokenPrices.data,
       feeTokenConfig,
       true,
     );
 
-    if (!bridgePrice) {
+    if (!feePrice) {
       return <></>;
     }
 
     return (
       <Stack direction="row" justifyContent="space-between">
         <Typography color={theme.palette.text.secondary} fontSize={14}>
-          Bridge fee
+          Relayer fee
         </Typography>
         {isFetchingQuote ? (
           <CircularProgress size={14} />
         ) : (
-          <Typography fontSize={14}>{bridgePrice}</Typography>
+          <Typography fontSize={14}>{`${toFixedDecimals(
+            relayFee.toString(),
+            4,
+          )} ${feeTokenConfig.symbol} (${feePrice})`}</Typography>
         )}
       </Stack>
     );
@@ -359,7 +367,7 @@ const SingleRoute = (props: Props) => {
           />
           <CardContent>
             <Stack justifyContent="space-between">
-              {bridgeFee}
+              {relayerFee}
               {destinationGas}
             </Stack>
             <Stack direction="row" justifyContent="space-between">

wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx

@@ -23,6 +23,7 @@ import {
 import { getExplorerLink } from 'utils/sdkv2';
 
 import type { RootState } from 'store';
+import { toFixedDecimals } from 'utils/balance';
 
 const useStyles = makeStyles()((theme: any) => ({
   container: {
@@ -173,26 +174,34 @@ const TransactionDetails = () => {
       return <></>;
     }
 
-    const bridgePrice = calculateUSDPrice(
-      relayerFee?.fee,
+    const feeTokenConfig = config.tokens[relayerFee.tokenKey];
+    if (!feeTokenConfig) {
+      return <></>;
+    }
+
+    const feePrice = calculateUSDPrice(
+      relayerFee.fee,
       tokenPrices.data,
-      config.tokens[relayerFee.tokenKey],
+      feeTokenConfig,
       true,
     );
 
-    if (!bridgePrice) {
+    if (!feePrice) {
       return <></>;
     }
 
     return (
       <Stack direction="row" justifyContent="space-between">
         <Typography color={theme.palette.text.secondary} fontSize={14}>
-          Bridge fee
+          Relayer fee
         </Typography>
         {tokenPrices.isFetching ? (
           <CircularProgress size={14} />
         ) : (
-          <Typography fontSize={14}>{bridgePrice}</Typography>
+          <Typography fontSize={14}>{`${toFixedDecimals(
+            relayerFee.fee.toString(),
+            4,
+          )} ${feeTokenConfig.symbol} (${feePrice})`}</Typography>
         )}
       </Stack>
     );