@openocean.finance/widget 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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",
@@ -47,8 +47,8 @@
     "@mui/icons-material": "6.0.2",
     "@mui/material": "^6.4.8",
     "@mui/system": "^6.4.8",
-    "@openocean.finance/wallet-management": "^1.0.7",
-    "@openocean.finance/widget-sdk": "^1.0.3",
+    "@openocean.finance/wallet-management": "^1.0.8",
+    "@openocean.finance/widget-sdk": "^1.0.5",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.4",

package/src/components/Header/Header.tsx

@@ -7,7 +7,7 @@ import { ElementId, createElementId } from '../../utils/elements.js'
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'
 import { Container } from './Header.style.js'
 import { NavigationHeader } from './NavigationHeader.js'
-// import { WalletHeader } from './WalletHeader.js'
+import { WalletHeader } from './WalletHeader.js'
 
 export const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation()
@@ -52,7 +52,7 @@ export const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
 export const Header: FC = () => {
   return (
     <HeaderContainer>
-      {/* <WalletHeader /> */}
+      <WalletHeader />
       <NavigationHeader />
     </HeaderContainer>
   )

package/src/components/Messages/PriceImpactHighMessage.tsx

@@ -1,17 +1,44 @@
-import { type BoxProps, Typography } from '@mui/material'
-import { useTranslation } from 'react-i18next'
+import { WarningRounded } from '@mui/icons-material'
+import {
+  type BoxProps,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+} from '@mui/material'
 import { AlertMessage } from './AlertMessage.js'
-
-interface GasSufficiencyMessageProps extends BoxProps {
-  // insufficientGas?: GasSufficiency[]
+import { useStorePriceImpactAcknowledged } from './useMessageQueue.js'
+interface PriceImpactHighMessageProps extends BoxProps {
+  onAcknowledge?: (acknowledged: boolean) => void
 }
 
-export const PriceImpactHighMessage: React.FC<GasSufficiencyMessageProps> = ({
+export const PriceImpactHighMessage: React.FC<PriceImpactHighMessageProps> = ({
+  onAcknowledge,
   ...props
 }) => {
-  const { t } = useTranslation()
+  const acknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.priceImpactAcknowledged
+  )
+  const setAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.setPriceImpactAcknowledged
+  )
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.checked
+    setAcknowledged(newValue)
+    onAcknowledge?.(newValue)
+  }
+
   return (
-    <AlertMessage severity="warning" {...props}>
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography variant="body2" sx={{ color: 'text.primary' }}>
+          Price impact is too high
+        </Typography>
+      }
+      {...props}
+    >
       <Typography
         variant="body2"
         sx={{
@@ -19,9 +46,14 @@ export const PriceImpactHighMessage: React.FC<GasSufficiencyMessageProps> = ({
           pt: 1,
         }}
       >
-        Price impact is too high. I acknowledge the risk and confirm to continue
-        the trade despite loss of funs
+        I acknowledge the risk and confirm to continue the trade despite loss of
+        funds
       </Typography>
+      <FormControlLabel
+        control={<Checkbox checked={acknowledged} onChange={handleChange} />}
+        label="I understand and accept the risk"
+        sx={{ alignItems: 'center', px: 2, pt: 1 }}
+      />
     </AlertMessage>
   )
 }

package/src/components/Messages/WarningMessages.tsx

@@ -7,7 +7,10 @@ import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
 import { GasSufficiencyMessageBridge } from './GasSufficiencyMessageBridge.js'
 import { PriceImpactHighMessage } from './PriceImpactHighMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
-import { useMessageQueue } from './useMessageQueue.js'
+import {
+  useMessageQueue,
+  useStorePriceImpactAcknowledged,
+} from './useMessageQueue.js'
 
 type WarningMessagesProps = BoxProps & {
   route?: Route
@@ -20,7 +23,9 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
   ...props
 }) => {
   const { messages, hasMessages } = useMessageQueue(route, allowInteraction)
-
+  const setPriceImpactAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.setPriceImpactAcknowledged
+  )
   const getMessage = () => {
     switch (messages[0]?.id) {
       case 'INSUFFICIENT_FUNDS':
@@ -37,7 +42,14 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
       case 'ACCOUNT_NOT_DEPLOYED':
         return <AccountNotDeployedMessage {...props} />
       case 'PRICE_IMPACT_HIGH':
-        return <PriceImpactHighMessage {...props} />
+        return (
+          <PriceImpactHighMessage
+            onAcknowledge={(e) => {
+              setPriceImpactAcknowledged(e)
+            }}
+            {...props}
+          />
+        )
       case 'TO_ADDRESS_REQUIRED':
         const fromChainId = route?.fromChainId
         const toChainId = route?.toChainId

package/src/components/Messages/useMessageQueue.ts

@@ -1,5 +1,6 @@
 import type { Route } from '@openocean.finance/widget-sdk'
 import { useMemo } from 'react'
+import { create } from 'zustand'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
 import { useGasSufficiencyBridge } from '../../hooks/useGasSufficiencyBridge.js'
@@ -7,6 +8,15 @@ import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDe
 import { usePriceImpact } from '../../hooks/usePriceImpact.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 
+export const useStorePriceImpactAcknowledged = create((set) => ({
+  priceImpactAcknowledged: false,
+  setPriceImpactAcknowledged: (v: boolean) =>
+    set((state) => {
+      return {
+        priceImpactAcknowledged: v,
+      }
+    }),
+}))
 interface QueuedMessage {
   id: string
   priority: number
@@ -33,16 +43,16 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
 
-    if (Math.abs(priceImpact) >= 0.3) {
+    if (insufficientFromToken) {
       queue.push({
-        id: 'PRICE_IMPACT_HIGH',
+        id: 'INSUFFICIENT_FUNDS',
         priority: 1,
       })
     }
 
-    if (insufficientFromToken) {
+    if (priceImpact <= -0.3) {
       queue.push({
-        id: 'INSUFFICIENT_FUNDS',
+        id: 'PRICE_IMPACT_HIGH',
         priority: 1,
       })
     }
@@ -81,9 +91,11 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     allowInteraction,
     insufficientFromToken,
     insufficientGas,
+    insufficientBridge,
     isCompatibleDestinationAccount,
     requiredToAddress,
     toAddress,
+    priceImpact,
   ])
 
   return {

package/src/components/TransactionDetails.tsx

@@ -291,10 +291,12 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               sx={{
                 fontWeight: 600,
                 color: priceImpact
-                  ? Math.abs(Number(priceImpact)) >= 0.3
-                    ? 'error.main'
-                    : 'orange'
-                  : 'main',
+                  ? Number(priceImpact) < 0
+                    ? Number(priceImpact) > -0.3
+                      ? 'orange'
+                      : 'error.main'
+                    : 'green'
+                  : '',
               }}
             >
               {priceImpact ? t('format.percent', { value: priceImpact }) : '--'}

package/src/config/version.ts

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

package/src/hooks/useRoutes.ts

@@ -37,6 +37,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     fee,
     feeConfig,
     useRelayerRoutes,
+    referrer
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -238,6 +239,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                 slippage: formattedSlippage, // OpenOcean expects slippage like '100' for 1%
                 gasPrice: gasPrice || '10', // Consider chain-specific defaults
                 enabledDexIds: fromChainId === 1151111081099710 ? '6' : '', // Example for Solana specific dex
+                referrer: referrer?.address || '',
+                referrerFee: referrer?.fee || '',
               })
             } else {
               // Use getQuote if account is not connected (view mode)

package/src/hooks/useTokenPrice.ts

@@ -10,7 +10,7 @@ export const useTokenPrice = (chainId?: number, token?: TokenAmount) => {
         return undefined
       }
       const prices = await OpenOceanService.getTokensPrice(chainId.toString(), [token.address])
-      return prices[token.address.toLowerCase()]
+      return prices[token.address.toLowerCase()] || 0
     },
     enabled: !!chainId && !!token?.address,
     refetchInterval: 60_000, // 每分钟更新一次价格

package/src/pages/MainPage/ReviewButton.tsx

@@ -1,7 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
-import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
+import {
+  useMessageQueue,
+  useStorePriceImpactAcknowledged,
+} from '../../components/Messages/useMessageQueue.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -21,7 +24,20 @@ export const ReviewButton: React.FC = () => {
 
   const currentRoute = routes?.[0]
 
-  const { hasMessages } = useMessageQueue(currentRoute, {})
+  const { messages } = useMessageQueue(currentRoute)
+  const priceImpactAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.priceImpactAcknowledged
+  )
+
+  let hasMessages = messages.length > 0
+  if (messages.length > 0) {
+    const message: any = messages.find(
+      (message) => message.id === 'PRICE_IMPACT_HIGH'
+    )
+    if (message && priceImpactAcknowledged) {
+      hasMessages = false
+    }
+  }
 
   const handleClick = async () => {
     if (!currentRoute) {

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,5 +1,8 @@
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
-import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
+import {
+  useMessageQueue,
+  useStorePriceImpactAcknowledged,
+} from '../../components/Messages/useMessageQueue.js'
 import type { StartTransactionButtonProps } from './types.js'
 
 export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
@@ -8,8 +11,20 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
   text,
   loading,
 }) => {
-  const { hasMessages, isLoading } = useMessageQueue(route, true)
+  const { messages, isLoading } = useMessageQueue(route)
+  const priceImpactAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.priceImpactAcknowledged
+  )
 
+  let hasMessages = messages.length > 0
+  if (messages.length > 0) {
+    const message: any = messages.find(
+      (message) => message.id === 'PRICE_IMPACT_HIGH'
+    )
+    if (message && priceImpactAcknowledged) {
+      hasMessages = false
+    }
+  }
   return (
     <BaseTransactionButton
       onClick={onClick}

package/src/services/OpenOceanService.ts

@@ -77,7 +77,9 @@ export class OpenOceanService {
     gasPrice?: string
     disabledDexIds?: string
     enabledDexIds?: string
-    referrer?: string
+    referrer?: string,
+    referrerFee?: string,
+    referrerFeeShare?: string
   }) {
     const apiUrl = this.getApiUrl(params.chain)
     const slippage = (Number(params.slippage || '1') * 10000).toString()
@@ -94,6 +96,8 @@ export class OpenOceanService {
       disabledDexIds: params.disabledDexIds || '',
       enabledDexIds: params.enabledDexIds || '',
       referrer: params.referrer || '0x3487ef9f9b36547e43268b8f0e2349a226c70b53',
+      referrerFee: (Number(params.referrerFee || '0') * 100).toString(),
+      referrerFeeShare: params.referrerFeeShare || '1500',
     })
     const isV1Api = Object.keys(this.CHAIN_ID_MAP).includes(params.chain.toString())
     const swapEndpoint = isV1Api ? 'swap-quote' : 'swap'

package/src/types/widget.ts

@@ -231,7 +231,10 @@ export interface WidgetConfig {
   apiKey?: string
   fee?: number
   feeConfig?: WidgetFeeConfig
-  referrer?: string
+  referrer?: {
+    address: string
+    fee: string
+  }
 
   routePriority?: Order
   slippage?: number