@openocean.finance/widget 1.0.19 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Openocean Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",

package/src/components/Header/NavigationTabs.tsx

@@ -6,6 +6,7 @@ import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 import { HeaderAppBar } from '../Header/Header.style.js'
 import { Tab, Tabs } from '../Tabs/Tabs.style.js'
+import { useServerErrorStore } from '../../stores/useServerErrorStore.js'
 
 export const NavigationTabs = () => {
   const { subvariant } = useWidgetConfig()
@@ -44,6 +45,7 @@ export const NavigationTabs = () => {
     setFieldValue('toToken', '')
     const newState: 'swap' | 'bridge' = value === 0 ? 'swap' : 'bridge'
     setState(newState)
+    useServerErrorStore.getState().setError(null)
   }
 
   return (

package/src/components/Messages/ServeErrorMessage.tsx

@@ -0,0 +1,31 @@
+import { WarningRounded } from '@mui/icons-material'
+import { type BoxProps, Typography } from '@mui/material'
+import { AlertMessage } from './AlertMessage.js'
+
+interface ServerErrorMessageProps extends BoxProps {
+  errorMsg?: String
+}
+
+export const ServerErrorMessage: React.FC<ServerErrorMessageProps> = ({
+  errorMsg,
+  ...props
+}) => {
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          {errorMsg}
+        </Typography>
+      }
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -11,6 +11,7 @@ import {
   useMessageQueue,
   useStorePriceImpactAcknowledged,
 } from './useMessageQueue.js'
+import { ServerErrorMessage } from './ServeErrorMessage.js'
 
 type WarningMessagesProps = BoxProps & {
   route?: Route
@@ -57,6 +58,8 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
           return <ToAddressRequiredMessage {...props} />
         }
         return null
+      case 'SERVER_ERROR':
+        return <ServerErrorMessage errorMsg={messages[0].props?.errorMsg} {...props} />
       default:
         return null
     }

package/src/components/Messages/useMessageQueue.ts

@@ -7,6 +7,7 @@ import { useGasSufficiencyBridge } from '../../hooks/useGasSufficiencyBridge.js'
 import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { usePriceImpact } from '../../hooks/usePriceImpact.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useServerErrorStore } from '../../stores/useServerErrorStore.js'
 
 export const useStorePriceImpactAcknowledged = create((set) => ({
   priceImpactAcknowledged: false,
@@ -17,6 +18,7 @@ export const useStorePriceImpactAcknowledged = create((set) => ({
       }
     }),
 }))
+
 interface QueuedMessage {
   id: string
   priority: number
@@ -40,6 +42,8 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
 
   const { priceImpact } = usePriceImpact(route)
 
+  const serverErrorMsg = useServerErrorStore((s) => s.error)
+
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
 
@@ -86,6 +90,14 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
+    if (serverErrorMsg) {
+      queue.push({
+        id: 'SERVER_ERROR',
+        priority: 0,
+        props: { errorMsg: serverErrorMsg },
+      })
+    }
+
     return queue.sort((a, b) => a.priority - b.priority)
   }, [
     allowInteraction,
@@ -96,6 +108,7 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     requiredToAddress,
     toAddress,
     priceImpact,
+    serverErrorMsg
   ])
 
   return {

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@openocean.finance/widget'
-export const version = '1.0.19'
+export const version = '1.0.20'

package/src/hooks/useRoutes.ts

@@ -20,6 +20,7 @@ import { useIsBatchingSupported } from './useIsBatchingSupported.js'
 import { useSwapOnly } from './useSwapOnly.js'
 import { useToken } from './useToken.js'
 import { useWidgetEvents } from './useWidgetEvents.js'
+import { useServerErrorStore } from '../stores/useServerErrorStore.js'
 
 const refetchTime = 60_000
 
@@ -178,6 +179,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         signal,
       }) => {
         try {
+          useServerErrorStore.getState().setError(null)
           const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
           const formattedSlippage = slippage
             ? (Number.parseFloat(slippage) / 100).toString()

package/src/services/DebridgeService.ts

@@ -1,4 +1,5 @@
 import { encodeAbiParameters, parseAbiParameters } from 'viem'
+import { useServerErrorStore } from '../stores/useServerErrorStore.js'
 
 // Type definitions (can be moved to a separate types file if needed)
 interface Asset {
@@ -508,6 +509,7 @@ export class DebridgeService {
       }
       return { data };
     } catch (error: any) {
+      useServerErrorStore.getState().setError(error.response?.data?.errorMessage || error.message);
       console.error(
         'Error getting Debridge quote:',
         error.response?.data || error.message
@@ -758,6 +760,7 @@ export class DebridgeService {
         'Error fetching Debridge Solana transaction:',
         error.response?.data || error.message
       )
+      useServerErrorStore.getState().setError(error.response?.data?.errorMessage || error.message);
       return null
     }
   }

package/src/stores/useServerErrorStore.ts

@@ -0,0 +1,9 @@
+import { create } from 'zustand'
+
+export const useServerErrorStore = create<{
+  error: string | null
+  setError: (msg: string | null) => void
+}>((set) => ({
+  error: null,
+  setError: (msg) => set({ error: msg }),
+}))