feat(ramp): offramp analytics (#7637)

MetaMask · Nov 15, 2023 · b4a91b5 · b4a91b5
1 parent dcd0f64
commit b4a91b5
Show file tree

Hide file tree

Showing 28 changed files with 2,412 additions and 517 deletions.
diff --git a/app/components/UI/Ramp/buy/Views/BuildQuote/BuildQuote.test.tsx b/app/components/UI/Ramp/buy/Views/BuildQuote/BuildQuote.test.tsx
@@ -14,13 +14,14 @@ import usePaymentMethods from '../../hooks/usePaymentMethods';
 import {
   mockCryptoCurrenciesData,
   mockFiatCurrenciesData,
-  mockRegionsData,
   mockPaymentMethods,
+  mockRegionsData,
 } from './BuildQuote.constants';
 import useLimits from '../../hooks/useLimits';
 import useAddressBalance from '../../../../../hooks/useAddressBalance/useAddressBalance';
 import useBalance from '../../../common/hooks/useBalance';
 import { toTokenMinimalUnit } from '../../../../../../util/number';
+import { RampType } from '../../../../../../reducers/fiatOrders/types';
 
 const getByRoleButton = (name?: string | RegExp) =>
   screen.getByRole('button', { name });
@@ -356,14 +357,13 @@ describe('BuildQuote View', () => {
 
     mockUseRampSDKValues.isBuy = false;
     mockUseRampSDKValues.isSell = true;
-
-    // TODO(analytics): replace with correct event once sell analytics is implemented
+    mockUseRampSDKValues.rampType = RampType.SELL;
     render(BuildQuote);
     fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
     expect(mockPop).toHaveBeenCalled();
-    expect(mockTrackEvent).toBeCalledWith('ONRAMP_CANCELED', {
-      chain_id_destination: '1',
-      location: 'Amount to Buy Screen',
+    expect(mockTrackEvent).toBeCalledWith('OFFRAMP_CANCELED', {
+      chain_id_source: '1',
+      location: 'Amount to Sell Screen',
     });
   });
 
@@ -720,14 +720,14 @@ describe('BuildQuote View', () => {
       fiatCurrency: mockUseFiatCurrenciesValues.currentFiatCurrency,
     });
 
-    // TODO(analytics): update with correct event once sell analytics is implemented
-    expect(mockTrackEvent).toHaveBeenCalledWith('ONRAMP_QUOTES_REQUESTED', {
+    expect(mockTrackEvent).toHaveBeenCalledWith('OFFRAMP_QUOTES_REQUESTED', {
       amount: VALID_AMOUNT,
-      currency_source: mockUseFiatCurrenciesValues?.currentFiatCurrency?.symbol,
-      currency_destination: mockUseRampSDKValues?.selectedAsset?.symbol,
+      currency_source: mockUseRampSDKValues?.selectedAsset?.symbol,
+      currency_destination:
+        mockUseFiatCurrenciesValues?.currentFiatCurrency?.symbol,
       payment_method_id: mockUsePaymentMethodsValues.currentPaymentMethod?.id,
-      chain_id_destination: '1',
-      location: 'Amount to Buy Screen',
+      chain_id_source: '1',
+      location: 'Amount to Sell Screen',
     });
   });
 });
diff --git a/app/components/UI/Ramp/buy/Views/BuildQuote/BuildQuote.tsx b/app/components/UI/Ramp/buy/Views/BuildQuote/BuildQuote.tsx
@@ -62,7 +62,7 @@ import {
 import Routes from '../../../../../../constants/navigation/Routes';
 import { formatAmount } from '../../../common/utils';
 import { createQuotesNavDetails } from '../Quotes/Quotes';
-import { Region } from '../../../common/types';
+import { Region, ScreenLocation } from '../../../common/types';
 import { useStyles } from '../../../../../../component-library/hooks';
 
 import styleSheet from './BuildQuote.styles';
@@ -131,10 +131,15 @@ const BuildQuote = () => {
     selectedChainId,
     selectedNetworkName,
     sdkError,
+    rampType,
     isBuy,
     isSell,
   } = useRampSDK();
 
+  const screenLocation: ScreenLocation = isBuy
+    ? 'Amount to Buy Screen'
+    : 'Amount to Sell Screen';
+
   const {
     data: regions,
     isFetching: isFetchingRegions,
@@ -224,11 +229,18 @@ const BuildQuote = () => {
     isFetchingRegions;
 
   const handleCancelPress = useCallback(() => {
-    trackEvent('ONRAMP_CANCELED', {
-      location: 'Amount to Buy Screen',
-      chain_id_destination: selectedChainId,
-    });
-  }, [selectedChainId, trackEvent]);
+    if (isBuy) {
+      trackEvent('ONRAMP_CANCELED', {
+        location: screenLocation,
+        chain_id_destination: selectedChainId,
+      });
+    } else {
+      trackEvent('OFFRAMP_CANCELED', {
+        location: screenLocation,
+        chain_id_source: selectedChainId,
+      });
+    }
+  }, [screenLocation, isBuy, selectedChainId, trackEvent]);
 
   useEffect(() => {
     navigation.setOptions(
@@ -406,18 +418,34 @@ const BuildQuote = () => {
           fiatCurrency: currentFiatCurrency,
         }),
       );
-      trackEvent('ONRAMP_QUOTES_REQUESTED', {
-        currency_source: currentFiatCurrency.symbol,
-        currency_destination: selectedAsset.symbol,
+
+      const analyticsPayload = {
         payment_method_id: selectedPaymentMethodId as string,
-        chain_id_destination: selectedChainId,
         amount: amountNumber,
-        location: 'Amount to Buy Screen',
-      });
+        location: screenLocation,
+      };
+
+      if (isBuy) {
+        trackEvent('ONRAMP_QUOTES_REQUESTED', {
+          ...analyticsPayload,
+          currency_source: currentFiatCurrency.symbol,
+          currency_destination: selectedAsset.symbol,
+          chain_id_destination: selectedChainId,
+        });
+      } else {
+        trackEvent('OFFRAMP_QUOTES_REQUESTED', {
+          ...analyticsPayload,
+          currency_destination: currentFiatCurrency.symbol,
+          currency_source: selectedAsset.symbol,
+          chain_id_source: selectedChainId,
+        });
+      }
     }
   }, [
+    screenLocation,
     amountNumber,
     currentFiatCurrency,
+    isBuy,
     navigation,
     selectedAsset,
     selectedChainId,
@@ -472,10 +500,7 @@ const BuildQuote = () => {
     return (
       <ScreenLayout>
         <ScreenLayout.Body>
-          <ErrorViewWithReporting
-            error={sdkError}
-            location={'Amount to Buy Screen'}
-          />
+          <ErrorViewWithReporting error={sdkError} location={screenLocation} />
         </ScreenLayout.Body>
       </ScreenLayout>
     );
@@ -488,7 +513,7 @@ const BuildQuote = () => {
           <ErrorView
             description={error}
             ctaOnPress={retryMethod}
-            location={'Amount to Buy Screen'}
+            location={screenLocation}
           />
         </ScreenLayout.Body>
       </ScreenLayout>
@@ -550,7 +575,7 @@ const BuildQuote = () => {
             )}
             ctaLabel={strings('fiat_on_ramp_aggregator.change_payment_method')}
             ctaOnPress={showPaymentMethodsModal as () => void}
-            location={'Amount to Buy Screen'}
+            location={screenLocation}
           />
         </ScreenLayout.Body>
         <PaymentMethodModal
@@ -562,7 +587,8 @@ const BuildQuote = () => {
           selectedPaymentMethodType={currentPaymentMethod?.paymentType}
           onItemPress={handleChangePaymentMethod}
           selectedRegion={selectedRegion}
-          location={'Amount to Buy Screen'}
+          location={screenLocation}
+          rampType={rampType}
         />
       </ScreenLayout>
     );
@@ -801,7 +827,8 @@ const BuildQuote = () => {
         selectedPaymentMethodType={currentPaymentMethod?.paymentType}
         onItemPress={handleChangePaymentMethod}
         selectedRegion={selectedRegion}
-        location={'Amount to Buy Screen'}
+        location={screenLocation}
+        rampType={rampType}
       />
       <RegionModal
         isVisible={isRegionModalVisible}
@@ -810,7 +837,7 @@ const BuildQuote = () => {
         data={regions}
         dismiss={hideRegionModal as () => void}
         onRegionPress={handleRegionPress}
-        location={'Amount to Buy Screen'}
+        location={screenLocation}
       />
     </ScreenLayout>
   );

diff --git a/app/components/UI/Ramp/buy/Views/Checkout.tsx b/app/components/UI/Ramp/buy/Views/Checkout.tsx
@@ -56,12 +56,20 @@ const CheckoutWebView = () => {
   const { url: uri, customOrderId, provider } = params;
 
   const handleCancelPress = useCallback(() => {
-    trackEvent('ONRAMP_CANCELED', {
-      location: 'Provider Webview',
-      chain_id_destination: selectedChainId,
-      provider_onramp: provider.name,
-    });
-  }, [provider.name, selectedChainId, trackEvent]);
+    if (isBuy) {
+      trackEvent('ONRAMP_CANCELED', {
+        location: 'Provider Webview',
+        chain_id_destination: selectedChainId,
+        provider_onramp: provider.name,
+      });
+    } else {
+      trackEvent('OFFRAMP_CANCELED', {
+        location: 'Provider Webview',
+        chain_id_source: selectedChainId,
+        provider_offramp: provider.name,
+      });
+    }
+  }, [isBuy, provider.name, selectedChainId, trackEvent]);
 
   useEffect(() => {
     navigation.setOptions(

diff --git a/app/components/UI/Ramp/buy/Views/GetStarted/GetStarted.test.tsx b/app/components/UI/Ramp/buy/Views/GetStarted/GetStarted.test.tsx
@@ -145,6 +145,20 @@ describe('GetStarted', () => {
       chain_id_destination: '1',
       location: 'Get Started Screen',
     });
+
+    mockTrackEvent.mockReset();
+    mockUseRampSDKValues = {
+      ...mockUseRampSDKValues,
+      isBuy: false,
+      isSell: true,
+      rampType: RampType.SELL,
+    };
+    render(GetStarted);
+    fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
+    expect(mockTrackEvent).toBeCalledWith('OFFRAMP_CANCELED', {
+      chain_id_source: '1',
+      location: 'Get Started Screen',
+    });
   });
 
   it('navigates to network switcher on unsupported network when getStarted is true', async () => {

diff --git a/app/components/UI/Ramp/buy/Views/GetStarted/GetStarted.tsx b/app/components/UI/Ramp/buy/Views/GetStarted/GetStarted.tsx
@@ -29,11 +29,18 @@ const GetStarted: React.FC = () => {
   const { colors } = useTheme();
 
   const handleCancelPress = useCallback(() => {
-    trackEvent('ONRAMP_CANCELED', {
-      location: 'Get Started Screen',
-      chain_id_destination: selectedChainId,
-    });
-  }, [selectedChainId, trackEvent]);
+    if (isBuy) {
+      trackEvent('ONRAMP_CANCELED', {
+        location: 'Get Started Screen',
+        chain_id_destination: selectedChainId,
+      });
+    } else {
+      trackEvent('OFFRAMP_CANCELED', {
+        location: 'Get Started Screen',
+        chain_id_source: selectedChainId,
+      });
+    }
+  }, [isBuy, selectedChainId, trackEvent]);
 
   useEffect(() => {
     navigation.setOptions(
@@ -50,8 +57,15 @@ const GetStarted: React.FC = () => {
   }, [navigation, colors, handleCancelPress]);
 
   const handleOnPress = useCallback(() => {
+    trackEvent(
+      isBuy ? 'ONRAMP_GET_STARTED_CLICKED' : 'OFFRAMP_GET_STARTED_CLICKED',
+      {
+        text: 'Get Started',
+        location: 'Get Started Screen',
+      },
+    );
     setGetStarted(true);
-  }, [setGetStarted]);
+  }, [isBuy, setGetStarted, trackEvent]);
 
   useEffect(() => {
     if (getStarted) {