chore: handle multiple onramp event emissions (#1773)

Co-authored-by: Alissa Crane <[email protected]>

src/buy/components/BuyAmountInput.tsx

@@ -1,6 +1,6 @@
 import { isValidAmount } from '../../core/utils/isValidAmount';
 import { TextInput } from '../../internal/components/TextInput';
-import { background, cn, color } from '../../styles/theme';
+import { background, border, cn, color } from '../../styles/theme';
 import { formatAmount } from '../../swap/utils/formatAmount';
 import { TokenChip } from '../../token';
 import { useBuyContext } from './BuyProvider';
@@ -15,8 +15,9 @@ export function BuyAmountInput() {
   return (
     <div
       className={cn(
-        'flex h-full items-center rounded-lg border px-2 pl-4',
+        'flex h-full items-center border px-2 pl-4',
         background.default,
+        border.radius,
       )}
     >
       <TextInput

src/buy/components/BuyDropdown.tsx

@@ -5,7 +5,7 @@ import { useAccount } from 'wagmi';
 import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
 import { ONRAMP_BUY_URL } from '../../fund/constants';
 import { getFundingPopupSize } from '../../fund/utils/getFundingPopupSize';
-import { background, cn, color, text } from '../../styles/theme';
+import { background, border, cn, color, text } from '../../styles/theme';
 import { ONRAMP_PAYMENT_METHODS } from '../constants';
 import { BuyOnrampItem } from './BuyOnrampItem';
 import { useBuyContext } from './BuyProvider';
@@ -80,7 +80,8 @@ export function BuyDropdown() {
         color.foreground,
         background.default,
         'absolute right-0 bottom-0 flex translate-y-[102%] flex-col gap-2',
-        'z-10 min-w-80 rounded rounded-lg border p-2',
+        'z-10 min-w-80 rounded border p-2',
+        border.radius,
       )}
     >
       <div className="px-2 pt-2">Buy with</div>

src/buy/components/BuyMessage.tsx

@@ -1,4 +1,4 @@
-import { cn, color } from '../../styles/theme';
+import { cn, color, text } from '../../styles/theme';
 import { isSwapError } from '../../swap/utils/isSwapError';
 import { useBuyContext } from './BuyProvider';
 
@@ -16,7 +16,7 @@ export function BuyMessage() {
         ? color.foregroundMuted
         : color.error;
 
-    return <div className={cn(textColor, 'text-sm')}>{message}</div>;
+    return <div className={cn(textColor, text.label2)}>{message}</div>;
   }
 
   return null;

src/buy/components/BuyOnrampItem.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { appleSvg } from '../../internal/svg/appleSvg';
 import { cardSvg } from '../../internal/svg/cardSvg';
 import { coinbaseLogoSvg } from '../../internal/svg/coinbaseLogoSvg';
-import { cn, color } from '../../styles/theme';
+import { cn, color, text } from '../../styles/theme';
 import { useBuyContext } from './BuyProvider';
 
 type OnrampItemReact = {
@@ -37,6 +37,7 @@ export function BuyOnrampItem({
       className={cn(
         'flex items-center gap-2 rounded-lg p-2',
         'hover:bg-[var(--ock-bg-inverse)]',
+        text.label2,
       )}
       onClick={handleClick}
       type="button"

src/buy/components/BuyProvider.tsx

@@ -99,6 +99,7 @@ export function BuyProvider({
   const { onPopupClose } = useOnrampEventListeners({
     updateLifecycleStatus,
     maxSlippage: config.maxSlippage,
+    lifecycleStatus,
   });
 
   // used to detect when the popup is closed in order to stop loading state

src/buy/components/BuyTokenItem.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
-import { cn, color, pressable } from '../../styles/theme';
+import { cn, color, pressable, text } from '../../styles/theme';
 import type { SwapUnit } from '../../swap/types';
 import { TokenImage } from '../../token';
 import { useBuyContext } from './BuyProvider';
@@ -37,6 +37,7 @@ export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) {
       className={cn(
         'flex items-center gap-2 rounded-lg p-2',
         !hasInsufficientBalance && pressable.default,
+        text.label2,
       )}
       onClick={handleClick}
       type="button"

src/buy/hooks/useOnrampEventListeners.test.ts

@@ -21,6 +21,13 @@ describe('useOnrampEventListeners', () => {
       useOnrampEventListeners({
         updateLifecycleStatus: mockUpdateLifecycleStatus,
         maxSlippage: 0.5,
+        lifecycleStatus: {
+          statusName: 'init',
+          statusData: {
+            isMissingRequiredField: false,
+            maxSlippage: 0.5,
+          },
+        },
       }),
     );
 
@@ -38,6 +45,13 @@ describe('useOnrampEventListeners', () => {
       useOnrampEventListeners({
         updateLifecycleStatus: mockUpdateLifecycleStatus,
         maxSlippage: 0.5,
+        lifecycleStatus: {
+          statusName: 'init',
+          statusData: {
+            isMissingRequiredField: false,
+            maxSlippage: 0.5,
+          },
+        },
       }),
     );
 
@@ -61,11 +75,53 @@ describe('useOnrampEventListeners', () => {
     });
   });
 
+  it('should not handle transition_view event if lifecycleStatus is transactionPending', () => {
+    renderHook(() =>
+      useOnrampEventListeners({
+        updateLifecycleStatus: mockUpdateLifecycleStatus,
+        maxSlippage: 0.5,
+        lifecycleStatus: {
+          statusName: 'transactionPending',
+          statusData: {
+            isMissingRequiredField: false,
+            maxSlippage: 0.5,
+          },
+        },
+      }),
+    );
+
+    const mockedSetupOnrampEventListeners =
+      setupOnrampEventListeners as unknown as Mock;
+    const onEventCallback =
+      mockedSetupOnrampEventListeners.mock.calls[0][0].onEvent;
+
+    act(() => {
+      onEventCallback({
+        eventName: 'transition_view',
+      });
+    });
+
+    expect(mockUpdateLifecycleStatus).not.toHaveBeenCalledWith({
+      statusName: 'transactionPending',
+      statusData: {
+        isMissingRequiredField: false,
+        maxSlippage: 0.5,
+      },
+    });
+  });
+
   it('should handle onramp success', () => {
     renderHook(() =>
       useOnrampEventListeners({
         updateLifecycleStatus: mockUpdateLifecycleStatus,
         maxSlippage: 0.5,
+        lifecycleStatus: {
+          statusName: 'init',
+          statusData: {
+            isMissingRequiredField: false,
+            maxSlippage: 0.5,
+          },
+        },
       }),
     );
 
@@ -93,6 +149,13 @@ describe('useOnrampEventListeners', () => {
       useOnrampEventListeners({
         updateLifecycleStatus: mockUpdateLifecycleStatus,
         maxSlippage: 0.5,
+        lifecycleStatus: {
+          statusName: 'init',
+          statusData: {
+            isMissingRequiredField: false,
+            maxSlippage: 0.5,
+          },
+        },
       }),
     );
 

src/buy/hooks/useOnrampEventListeners.ts

@@ -7,15 +7,22 @@ import { setupOnrampEventListeners } from '../../fund/utils/setupOnrampEventList
 type UseOnrampLifecycleParams = {
   updateLifecycleStatus: (status: LifecycleStatus) => void;
   maxSlippage: number;
+  lifecycleStatus: LifecycleStatus;
 };
 
 export const useOnrampEventListeners = ({
   updateLifecycleStatus,
   maxSlippage,
+  lifecycleStatus,
 }: UseOnrampLifecycleParams) => {
   const handleOnrampEvent = useCallback(
     (data: EventMetadata) => {
-      if (data.eventName === 'transition_view') {
+      // Only update the lifecycle status if the current status is not 'transactionPending'
+      // Onramp emits a 'transition_view' event multiple times
+      if (
+        data.eventName === 'transition_view' &&
+        lifecycleStatus?.statusName !== 'transactionPending'
+      ) {
         updateLifecycleStatus({
           statusName: 'transactionPending',
           statusData: {
@@ -25,7 +32,7 @@ export const useOnrampEventListeners = ({
         });
       }
     },
-    [maxSlippage, updateLifecycleStatus],
+    [maxSlippage, updateLifecycleStatus, lifecycleStatus?.statusName],
   );
 
   const handleOnrampSuccess = useCallback(() => {