Add transfer.success event to v2 Redeem view (#2696)

* add transfer.success hook to Redeem view

* trim USD amount to 2 decimals

* fix typo

* rename state var

wormhole-connect/src/hooks/useUSDamountGetter.ts

@@ -19,7 +19,7 @@ export const useUSDamountGetter = (): ((args: {
       const tokenPrice = Number(getTokenPrice(prices, config.tokens[token]));
       const USDAmount = tokenPrice * numericAmount;
 
-      return isNaN(USDAmount) ? undefined : USDAmount;
+      return isNaN(USDAmount) ? undefined : parseFloat(USDAmount.toFixed(2));
     },
     [data],
   );

wormhole-connect/src/telemetry/index.ts

@@ -1,6 +1,7 @@
 import config from 'config';
 
-import { TokenDetails } from './types';
+import { TokenDetails, TransferDetails } from './types';
+import { Chain } from '@wormhole-foundation/sdk';
 
 export function getTokenDetails(token: string): TokenDetails {
   const tokenConfig = config.tokens[token]!;
@@ -11,3 +12,23 @@ export function getTokenDetails(token: string): TokenDetails {
     tokenId: tokenId ?? 'native',
   };
 }
+
+export function getTransferDetails(
+  route: string,
+  sourceToken: string,
+  destToken: string,
+  sourceChain: Chain,
+  destChain: Chain,
+  amount: string,
+  getUSDAmount: (args: { token: string; amount: string }) => number | undefined,
+): TransferDetails {
+  return {
+    route,
+    fromToken: getTokenDetails(sourceToken),
+    toToken: getTokenDetails(destToken),
+    fromChain: sourceChain,
+    toChain: destChain,
+    amount: Number(amount),
+    USDAmount: getUSDAmount({ token: sourceToken, amount }),
+  };
+}

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx

@@ -8,7 +8,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import ChevronLeft from '@mui/icons-material/ChevronLeft';
 import IconButton from '@mui/material/IconButton';
-import { getTokenDetails } from 'telemetry';
+import { getTransferDetails } from 'telemetry';
 import { Context } from 'sdklegacy';
 
 import Button from 'components/v2/Button';
@@ -139,16 +139,15 @@ const ReviewTransaction = (props: Props) => {
       return;
     }
 
-    // Details for config.dispatchEvent events
-    const transferDetails = {
+    const transferDetails = getTransferDetails(
       route,
-      fromToken: getTokenDetails(sourceToken),
-      toToken: getTokenDetails(destToken),
-      fromChain: sourceChain,
-      toChain: destChain,
-      amount: Number(amount),
-      USDAmount: getUSDAmount({ token: sourceToken, amount }),
-    };
+      sourceToken,
+      destToken,
+      sourceChain,
+      destChain,
+      amount,
+      getUSDAmount,
+    );
 
     // Handle custom transfer validation (if provided by integrator)
     if (config.validateTransfer) {

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

@@ -13,7 +13,7 @@ import {
   routes,
   TransferState,
 } from '@wormhole-foundation/sdk';
-import { getTokenDetails } from 'telemetry';
+import { getTokenDetails, getTransferDetails } from 'telemetry';
 import { makeStyles } from 'tss-react/mui';
 import { Context } from 'sdklegacy';
 
@@ -27,6 +27,7 @@ import useTrackTransfer from 'hooks/useTrackTransfer';
 import PoweredByIcon from 'icons/PoweredBy';
 import { SDKv2Signer } from 'routes/sdkv2/signer';
 import { setRoute } from 'store/router';
+import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
 import { displayAddress, getDisplayName, millisToHumanString } from 'utils';
 import { interpretTransferError } from 'utils/errors';
 import { joinClass } from 'utils/style';
@@ -101,6 +102,8 @@ const Redeem = () => {
 
   const [claimError, setClaimError] = useState('');
   const [isClaimInProgress, setIsClaimInProgress] = useState(false);
+  const [transferSuccessEventFired, setTransferSuccessEventFired] =
+    useState(false);
   const [etaExpired, setEtaExpired] = useState(false);
 
   const [isWalletSidebarOpen, setIsWalletSidebarOpen] = useState(false);
@@ -130,10 +133,34 @@ const Redeem = () => {
     fromChain,
     tokenKey,
     receivedTokenKey,
+    amount,
     receiveAmount,
     eta = 0,
   } = txData!;
 
+  const getUSDAmount = useUSDamountGetter();
+
+  useEffect(() => {
+    // When we see the transfer was complete for the first time,
+    // fire a transfer.success telemetry event.
+    if (isTxComplete && !transferSuccessEventFired) {
+      setTransferSuccessEventFired(true);
+
+      config.triggerEvent({
+        type: 'transfer.success',
+        details: getTransferDetails(
+          routeName!,
+          tokenKey,
+          receivedTokenKey,
+          fromChain,
+          toChain,
+          amount,
+          getUSDAmount,
+        ),
+      });
+    }
+  }, [isTxComplete]);
+
   const receivingWallet = useSelector(
     (state: RootState) => state.wallet.receiving,
   );