feat(ramp): add quotes expanded event

MetaMask · Feb 26, 2024 · e286905 · e286905
1 parent dfb5895
commit e286905
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 4 deletions.
diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
@@ -251,6 +251,18 @@ describe('Quotes', () => {
       jest.advanceTimersByTime(3000);
       jest.clearAllTimers();
     });
+    expect(mockTrackEvent.mock.lastCall).toMatchInlineSnapshot(`
+      Array [
+        "ONRAMP_QUOTES_EXPANDED",
+        Object {
+          "amount": 50,
+          "chain_id_destination": "1",
+          "currency_destination": "ETH",
+          "currency_source": "USD",
+          "payment_method_id": "/payment-methods/test-payment-method",
+        },
+      ]
+    `);
     expect(screen.toJSON()).toMatchSnapshot();
     act(() => {
       jest.useRealTimers();

diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.tsx
@@ -230,6 +230,35 @@ function Quotes() {
     trackEvent,
   ]);
 
+  const handleExpandQuotes = useCallback(() => {
+    setIsExpanded(true);
+    const payload = {
+      payment_method_id: selectedPaymentMethodId as string,
+      currency_source: params.fiatCurrency?.symbol,
+      currency_destination: params.asset?.symbol,
+      amount: params.amount,
+    };
+    if (isBuy) {
+      trackEvent('ONRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_destination: selectedChainId,
+      });
+    } else {
+      trackEvent('OFFRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_source: selectedChainId,
+      });
+    }
+  }, [
+    isBuy,
+    params.amount,
+    params.asset?.symbol,
+    params.fiatCurrency?.symbol,
+    selectedChainId,
+    selectedPaymentMethodId,
+    trackEvent,
+  ]);
+
   const handleOnQuotePress = useCallback(
     (quote: QuoteResponse | SellQuoteResponse) => {
       setProviderId(quote.provider.id);
@@ -739,7 +768,7 @@ function Quotes() {
                     label: strings(
                       'fiat_on_ramp_aggregator.explore_more_options',
                     ),
-                    onPress: () => setIsExpanded(true),
+                    onPress: handleExpandQuotes,
                   },
                 ]
               : []

diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
@@ -2843,7 +2843,7 @@ exports[`Quotes renders correctly after animation with quotes 1`] = `
 </View>
 `;
 
-exports[`Quotes renders correctly after animation with quotes and expanded 1`] = `
+exports[`Quotes renders correctly after animation with quotes and expanded 2`] = `
 <View
   style={
     Object {

diff --git a/app/components/UI/Ramp/types/analytics.ts b/app/components/UI/Ramp/types/analytics.ts
@@ -280,6 +280,21 @@ interface RampTransaction {
   order_id?: string;
 }
 
+interface RampQuotesExpanded {
+  payment_method_id: string;
+  currency_source: string;
+  currency_destination: string;
+  amount: number | string;
+}
+
+interface OnRampQuotesExpanded extends RampQuotesExpanded {
+  chain_id_destination: string;
+}
+
+interface OffRampQuotesExpanded extends RampQuotesExpanded {
+  chain_id_source: string;
+}
+
 export interface AnalyticsEvents {
   BUY_BUTTON_CLICKED: BuyButtonClicked;
   SELL_BUTTON_CLICKED: SellButtonClicked;
@@ -305,6 +320,9 @@ export interface AnalyticsEvents {
   ONRAMP_QUOTES_RECEIVED: OnRampQuotesReceived;
   OFFRAMP_QUOTES_RECEIVED: OffRampQuotesReceived;
 
+  ONRAMP_QUOTES_EXPANDED: OnRampQuotesExpanded;
+  OFFRAMP_QUOTES_EXPANDED: OffRampQuotesExpanded;
+
   ONRAMP_PROVIDER_SELECTED: OnRampProviderSelected;
   OFFRAMP_PROVIDER_SELECTED: OffRampProviderSelected;
 
@@ -341,6 +359,4 @@ export interface AnalyticsEvents {
   OFFRAMP_SEND_TRANSACTION_INVOKED: RampTransaction;
   OFFRAMP_SEND_TRANSACTION_CONFIRMED: RampTransaction;
   OFFRAMP_SEND_TRANSACTION_REJECTED: RampTransaction;
-
-  // after redirection events will go here
 }
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
@@ -205,6 +205,7 @@ enum EVENT_NAME {
   ONRAMP_QUOTES_REQUESTED = 'On-ramp Quotes Requested',
   ONRAMP_CANCELED = 'On-ramp Canceled',
   ONRAMP_QUOTES_RECEIVED = 'On-ramp Quotes Received',
+  ONRAMP_QUOTES_EXPANDED = 'On-ramp Quotes Expanded',
   ONRAMP_PROVIDER_SELECTED = 'On-ramp Provider Selected',
   ONRAMP_PROVIDER_DETAILS_VIEWED = 'On-ramp Provider Details Viewed',
   ONRAMP_DIRECT_PROVIDER_CLICKED = 'On-ramp Provider Custom Action Clicked',
@@ -227,6 +228,7 @@ enum EVENT_NAME {
   OFFRAMP_QUOTES_REQUESTED = 'Off-ramp Quotes Requested',
   OFFRAMP_CANCELED = 'Off-ramp Canceled',
   OFFRAMP_QUOTES_RECEIVED = 'Off-ramp Quotes Received',
+  OFFRAMP_QUOTES_EXPANDED = 'Off-ramp Quotes Expanded',
   OFFRAMP_PROVIDER_SELECTED = 'Off-ramp Provider Selected',
   OFFRAMP_PROVIDER_DETAILS_VIEWED = 'Off-ramp Provider Details Viewed',
   OFFRAMP_DIRECT_PROVIDER_CLICKED = 'Off-ramp Provider Custom Action Clicked',
@@ -592,6 +594,7 @@ const events = {
   ONRAMP_QUOTES_REQUESTED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_REQUESTED),
   ONRAMP_CANCELED: generateOpt(EVENT_NAME.ONRAMP_CANCELED),
   ONRAMP_QUOTES_RECEIVED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_RECEIVED),
+  ONRAMP_QUOTES_EXPANDED: generateOpt(EVENT_NAME.ONRAMP_QUOTES_EXPANDED),
   ONRAMP_PROVIDER_SELECTED: generateOpt(EVENT_NAME.ONRAMP_PROVIDER_SELECTED),
   ONRAMP_PROVIDER_DETAILS_VIEWED: generateOpt(
     EVENT_NAME.ONRAMP_PROVIDER_DETAILS_VIEWED,
@@ -628,6 +631,7 @@ const events = {
   OFFRAMP_QUOTES_REQUESTED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_REQUESTED),
   OFFRAMP_CANCELED: generateOpt(EVENT_NAME.OFFRAMP_CANCELED),
   OFFRAMP_QUOTES_RECEIVED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_RECEIVED),
+  OFFRAMP_QUOTES_EXPANDED: generateOpt(EVENT_NAME.OFFRAMP_QUOTES_EXPANDED),
   OFFRAMP_PROVIDER_SELECTED: generateOpt(EVENT_NAME.OFFRAMP_PROVIDER_SELECTED),
   OFFRAMP_PROVIDER_DETAILS_VIEWED: generateOpt(
     EVENT_NAME.OFFRAMP_PROVIDER_DETAILS_VIEWED,