Merge pull request #730 from reservoirprotocol/fix/fix-onanalyiticevent-error

Prevent onAnalyticEvent from throwing errors internally

Author: pedromcunha

.changeset/bitter-games-carry.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Prevent onAnalyticEvent from throwing errors internally

packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx

@@ -2,7 +2,7 @@ import type { Dispatch, FC } from 'react'
 import OnrampWidgetRenderer from './OnrampWidgetRenderer.js'
 import { Box, Button, Flex, Text } from '../../../primitives/index.js'
 import AmountInput from '../../../common/AmountInput.js'
-import { useContext, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faArrowDownLong,
@@ -77,9 +77,19 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
   onConnectWallet,
   onLinkNewWallet,
   onSetPrimaryWallet,
-  onAnalyticEvent,
+  onAnalyticEvent: _onAnalyticEvent,
   onSuccess
 }): JSX.Element => {
+  const onAnalyticEvent = useCallback(
+    (eventName: string, data?: any) => {
+      try {
+        _onAnalyticEvent?.(eventName, data)
+      } catch (e) {
+        console.error('Error in onAnalyticEvent', eventName, data, e)
+      }
+    },
+    [_onAnalyticEvent]
+  )
   const [addressModalOpen, setAddressModalOpen] = useState(false)
   const [onrampModalOpen, setOnrampModalOpen] = useState(false)
   const { isConnected } = useAccount()

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -1,5 +1,12 @@
 import { Flex, Button, Text, Box } from '../../primitives/index.js'
-import { useContext, useEffect, useMemo, useState, type FC } from 'react'
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type FC
+} from 'react'
 import { useRelayClient } from '../../../hooks/index.js'
 import type { Address } from 'viem'
 import { formatUnits } from 'viem'
@@ -110,11 +117,21 @@ const SwapWidget: FC<SwapWidgetProps> = ({
   onFromTokenChange,
   onToTokenChange,
   onConnectWallet,
-  onAnalyticEvent,
+  onAnalyticEvent: _onAnalyticEvent,
   onSwapSuccess,
   onSwapValidating,
   onSwapError
 }): JSX.Element => {
+  const onAnalyticEvent = useCallback(
+    (eventName: string, data?: any) => {
+      try {
+        _onAnalyticEvent?.(eventName, data)
+      } catch (e) {
+        console.error('Error in onAnalyticEvent', eventName, data, e)
+      }
+    },
+    [_onAnalyticEvent]
+  )
   const relayClient = useRelayClient()
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides