feat(ramp): add event when user expands quotes

app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx

@@ -251,6 +251,27 @@ 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",
+          "previously_used_count": 0,
+          "provider_onramp_first": "Banxa (Staging)",
+          "provider_onramp_list": Array [
+            "Banxa (Staging)",
+            "MoonPay (Staging)",
+            "Transak (Staging)",
+          ],
+          "refresh_count": 1,
+          "results_count": 3,
+        },
+      ]
+    `);
     expect(screen.toJSON()).toMatchSnapshot();
     act(() => {
       jest.useRealTimers();

app/components/UI/Ramp/Views/Quotes/Quotes.tsx

@@ -235,6 +235,48 @@ function Quotes() {
     trackEvent,
   ]);
 
+  const handleExpandQuotes = useCallback(() => {
+    setIsExpanded(true);
+    const payload = {
+      payment_method_id: selectedPaymentMethodId as string,
+      amount: params.amount,
+      refresh_count: appConfig.POLLING_CYCLES - pollingCyclesLeft,
+      results_count: filteredQuotes.length,
+      provider_onramp_first: filteredQuotes[0]?.provider?.name,
+      provider_onramp_list: filteredQuotes.map(({ provider }) => provider.name),
+      previously_used_count: filteredQuotes.filter(({ provider }) =>
+        ordersProviders.includes(provider.id),
+      ).length,
+    };
+    if (isBuy) {
+      trackEvent('ONRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_destination: selectedChainId,
+        currency_source: params.fiatCurrency?.symbol,
+        currency_destination: params.asset?.symbol,
+      });
+    } else {
+      trackEvent('OFFRAMP_QUOTES_EXPANDED', {
+        ...payload,
+        chain_id_source: selectedChainId,
+        currency_source: params.asset?.symbol,
+        currency_destination: params.fiatCurrency?.symbol,
+      });
+    }
+  }, [
+    appConfig.POLLING_CYCLES,
+    filteredQuotes,
+    isBuy,
+    ordersProviders,
+    params.amount,
+    params.asset?.symbol,
+    params.fiatCurrency?.symbol,
+    pollingCyclesLeft,
+    selectedChainId,
+    selectedPaymentMethodId,
+    trackEvent,
+  ]);
+
   const handleOnQuotePress = useCallback(
     (quote: QuoteResponse | SellQuoteResponse) => {
       setProviderId(quote.provider.id);
@@ -747,7 +789,7 @@ function Quotes() {
                     label: strings(
                       'fiat_on_ramp_aggregator.explore_more_options',
                     ),
-                    onPress: () => setIsExpanded(true),
+                    onPress: handleExpandQuotes,
                   },
                 ]
               : []

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 {

app/components/UI/Ramp/types/analytics.ts

@@ -280,6 +280,24 @@ interface RampTransaction {
   order_id?: string;
 }
 
+interface RampQuotesExpanded {
+  payment_method_id: string;
+  currency_source: string;
+  currency_destination: string;
+  amount: number | string;
+  refresh_count: number;
+  results_count: number;
+  previously_used_count: number;
+}
+
+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 +323,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 +362,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
 }

app/core/Analytics/MetaMetrics.events.ts

@@ -206,6 +206,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',
@@ -228,6 +229,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,