new price percent feature

Author: bergarces

app/components/UI/Assets/PriceAlerts/Views/CreatePriceAlertView/CreatePriceAlertView.tsx

@@ -46,24 +46,39 @@ import { IconName } from '../../../../../../component-library/components/Icons/I
 import Routes from '../../../../../../constants/navigation/Routes';
 import { formatPriceWithSubscriptNotation } from '../../../../Predict/utils/format';
 import {
+  Alert,
   ManagePriceAlertsTestIds,
-  PriceAlert,
   PriceAlertRouteParams,
   PriceAlertAnalytics,
 } from '../../constants';
 import {
+  deleteAlertByType,
   fetchAlerts,
-  deleteAlert,
-  updateAlert,
+  normalizeAlerts,
   priceAlertsQueryKey,
+  updateAlertByType,
 } from '../../api';
+import {
+  formatPercentAlertSubtitle,
+  formatPercentAlertTitle,
+} from '../../utils';
 import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 
 const styles = StyleSheet.create({
   switchDisabled: { opacity: 0.5 },
 });
 
+/** Analytics `alert_type` + `period`/`direction` properties for a given alert. */
+const analyticsPropsForAlert = (alert: Alert) =>
+  alert.type === 'percent_change'
+    ? {
+        alert_type: PriceAlertAnalytics.TYPE.PERCENT,
+        period: alert.period,
+        direction: alert.direction,
+      }
+    : { alert_type: PriceAlertAnalytics.TYPE.THRESHOLD };
+
 const ManagePriceAlertsView: React.FC = () => {
   const tw = useTailwind();
   const { colors, brandColors } = useTheme();
@@ -98,10 +113,11 @@ const ManagePriceAlertsView: React.FC = () => {
     isError,
   } = useQuery({
     queryKey: priceAlertsQueryKey(assetId),
-    queryFn: async (): Promise<PriceAlert[]> => {
+    queryFn: async (): Promise<Alert[]> => {
       const response = await fetchAlerts(assetId);
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      return response.json();
+      const body: unknown[] = await response.json();
+      return normalizeAlerts(body);
     },
     retry: false,
     staleTime: 0,
@@ -150,16 +166,22 @@ const ManagePriceAlertsView: React.FC = () => {
   }, [navigation]);
 
   const handleNavigateToCreate = useCallback(
-    (editingAlert?: PriceAlert) => {
+    (editingAlert?: Alert) => {
       navigation.navigate(Routes.CREATE_PRICE_ALERT, {
         symbol,
         ticker,
         currentPrice,
         currentCurrency,
         assetId,
         fromManage: true,
-        existingThresholds: alerts.map((a) => a.threshold),
+        existingThresholds: alerts
+          .filter((a) => a.type === 'absolute_price')
+          .map((a) => a.threshold),
+        existingPercentAlerts: alerts.filter(
+          (a) => a.type === 'percent_change',
+        ),
         editingAlert,
+        initialType: editingAlert?.type,
       });
     },
     [
@@ -180,30 +202,27 @@ const ManagePriceAlertsView: React.FC = () => {
       setDeletingIds((prev) => new Set(prev).add(id));
 
       const queryKey = priceAlertsQueryKey(assetId);
-      const previous = queryClient.getQueryData<PriceAlert[]>(queryKey) ?? [];
+      const previous = queryClient.getQueryData<Alert[]>(queryKey) ?? [];
+      const target = previous.find((a) => a.id === id);
 
       try {
-        const response = await deleteAlert(id);
+        if (!target) throw new Error('Alert not found');
+        const response = await deleteAlertByType(target);
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
-        const deleted = previous.find((a) => a.id === id);
-        if (deleted) {
-          trackEvent(
-            createEventBuilder(
-              MetaMetricsEvents.PRICE_ALERT_CREATION_INTERACTION,
-            )
-              .addProperties({
-                interaction_type: PriceAlertAnalytics.INTERACTION_TYPE.DELETED,
-                asset_id: assetId,
-                token_symbol: displayTicker,
-                alert_type: PriceAlertAnalytics.TYPE.THRESHOLD,
-                alert_value: deleted.threshold,
-                alert_recurring: deleted.recurring,
-                alert_active: deleted.active,
-              })
-              .build(),
-          );
-        }
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.PRICE_ALERT_CREATION_INTERACTION)
+            .addProperties({
+              interaction_type: PriceAlertAnalytics.INTERACTION_TYPE.DELETED,
+              asset_id: assetId,
+              token_symbol: displayTicker,
+              ...analyticsPropsForAlert(target),
+              alert_value: target.threshold,
+              alert_recurring: target.recurring,
+              alert_active: target.active,
+            })
+            .build(),
+        );
 
         const next = previous.filter((a) => a.id !== id);
         queryClient.setQueryData(queryKey, next);
@@ -227,8 +246,8 @@ const ManagePriceAlertsView: React.FC = () => {
         });
         const response = await fetchAlerts(assetId).catch(() => null);
         if (response?.ok) {
-          const data: PriceAlert[] = await response.json().catch(() => []);
-          queryClient.setQueryData(queryKey, data);
+          const body: unknown[] = await response.json().catch(() => []);
+          queryClient.setQueryData(queryKey, normalizeAlerts(body));
         } else {
           queryClient.setQueryData(queryKey, previous);
         }
@@ -260,37 +279,36 @@ const ManagePriceAlertsView: React.FC = () => {
       setTogglingIds((prev) => new Set(prev).add(id));
 
       const queryKey = priceAlertsQueryKey(assetId);
-      const previous = queryClient.getQueryData<PriceAlert[]>(queryKey) ?? [];
+      const previous = queryClient.getQueryData<Alert[]>(queryKey) ?? [];
       const toggled = previous.find((a) => a.id === id);
       queryClient.setQueryData(
         queryKey,
         previous.map((a) => (a.id === id ? { ...a, active: newValue } : a)),
       );
 
       try {
-        const response = await updateAlert(id, { active: newValue });
+        if (!toggled) throw new Error('Alert not found');
+        const response = await updateAlertByType(toggled, {
+          active: newValue,
+        });
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
-        if (toggled) {
-          trackEvent(
-            createEventBuilder(
-              MetaMetricsEvents.PRICE_ALERT_CREATION_INTERACTION,
-            )
-              .addProperties({
-                interaction_type: PriceAlertAnalytics.INTERACTION_TYPE.UPDATED,
-                asset_id: assetId,
-                token_symbol: displayTicker,
-                alert_type: PriceAlertAnalytics.TYPE.THRESHOLD,
-                alert_value: toggled.threshold,
-                alert_recurring: toggled.recurring,
-                alert_active: newValue,
-                prev_alert_value: toggled.threshold,
-                prev_alert_recurring: toggled.recurring,
-                prev_alert_active: toggled.active,
-              })
-              .build(),
-          );
-        }
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.PRICE_ALERT_CREATION_INTERACTION)
+            .addProperties({
+              interaction_type: PriceAlertAnalytics.INTERACTION_TYPE.UPDATED,
+              asset_id: assetId,
+              token_symbol: displayTicker,
+              ...analyticsPropsForAlert(toggled),
+              alert_value: toggled.threshold,
+              alert_recurring: toggled.recurring,
+              alert_active: newValue,
+              prev_alert_value: toggled.threshold,
+              prev_alert_recurring: toggled.recurring,
+              prev_alert_active: toggled.active,
+            })
+            .build(),
+        );
       } catch {
         toastRef?.current?.showToast({
           variant: ToastVariants.Icon,
@@ -323,10 +341,28 @@ const ManagePriceAlertsView: React.FC = () => {
     ],
   );
 
-  const renderItem = ({ item }: { item: PriceAlert }) => {
+  const renderItem = ({ item }: { item: Alert }) => {
     const isDeleting = deletingIds.has(item.id);
     const isToggling = togglingIds.has(item.id);
 
+    const title =
+      item.type === 'percent_change'
+        ? formatPercentAlertTitle(item)
+        : strings('price_alerts.reaches_threshold', {
+            threshold: formatPriceWithSubscriptNotation(
+              item.threshold,
+              currentCurrency,
+              { maximumFractionDigits: 15 },
+            ),
+          });
+
+    const subtitle =
+      item.type === 'percent_change'
+        ? formatPercentAlertSubtitle(item)
+        : item.recurring
+          ? strings('price_alerts.recurring')
+          : strings('price_alerts.once_label');
+
     return (
       <Box
         flexDirection={BoxFlexDirection.Row}
@@ -342,18 +378,10 @@ const ManagePriceAlertsView: React.FC = () => {
           testID={`${ManagePriceAlertsTestIds.ALERT_EDIT_PREFIX}-${item.id}`}
         >
           <Text variant={TextVariant.BodyMd} color={TextColor.TextDefault}>
-            {strings('price_alerts.reaches_threshold', {
-              threshold: formatPriceWithSubscriptNotation(
-                item.threshold,
-                currentCurrency,
-                { maximumFractionDigits: 15 },
-              ),
-            })}
+            {title}
           </Text>
           <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
-            {item.recurring
-              ? strings('price_alerts.recurring')
-              : strings('price_alerts.once_label')}
+            {subtitle}
           </Text>
         </TouchableOpacity>