@openocean.finance/widget 1.0.0

package/src/services/SendAndConfirmSolanaTransaction.ts

@@ -0,0 +1,180 @@
+/**
+ * Solana Transaction Sending Service
+ * 
+ * This module handles sending and confirming transactions on Solana blockchain
+ */
+
+import { BlockhashWithExpiryBlockHeight, Connection } from "@solana/web3.js";
+
+/**
+ * Delay execution helper
+ * @param ms Delay time in milliseconds
+ */
+const delay = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Transaction sending and confirmation parameters interface
+ */
+interface SolanaTransactionParams {
+  /** Solana RPC connection instance */
+  connection: Connection;
+  /** Serialized transaction data */
+  serializedTransaction: Buffer;
+  /** Blockhash with expiry block height */
+  blockhashWithExpiryBlockHeight?: BlockhashWithExpiryBlockHeight;
+  /** Transaction process object */
+  process?: any;
+  /** Route update callback function */
+  updateRouteHook?: (route: any) => void;
+}
+
+/**
+ * Send raw transaction to Solana network
+ * 
+ * @param connection Solana RPC connection instance
+ * @param serializedTransaction Serialized transaction data
+ * @param process Transaction process object
+ * @param updateRouteHook Route update callback function
+ * @returns Transaction hash
+ */
+async function sendSolanaTransaction(
+  connection: Connection, 
+  serializedTransaction: Buffer,
+  process: any,
+  updateRouteHook?: (route: any) => void
+): Promise<string> {
+  try {
+    // Send transaction to network
+    const txid = await connection.sendRawTransaction(
+      serializedTransaction,
+      {
+        skipPreflight: true,
+      }
+    );
+    console.log('Transaction sent:', txid);
+
+    // Update transaction status to pending
+    if (process && updateRouteHook) {
+      process.status = 'PENDING';
+      process.txHash = txid;
+      process.message = 'Transaction pending';
+      updateRouteHook(process.route);
+    }
+
+    return txid;
+  } catch (error) {
+    console.error('Failed to send transaction:', error);
+    if (process && updateRouteHook) {
+      process.status = 'FAILED';
+      process.message = error instanceof Error ? error.message : 'Failed to send transaction';
+      updateRouteHook(process.route);
+    }
+    throw error;
+  }
+}
+
+/**
+ * Confirm Solana transaction status
+ * 
+ * @param connection Solana RPC connection instance
+ * @param txid Transaction hash
+ * @param process Transaction process object
+ * @param updateRouteHook Route update callback function
+ * @param maxRetries Maximum retry attempts
+ * @returns Whether transaction succeeded
+ */
+async function confirmSolanaTransaction(
+  connection: Connection,
+  txid: string,
+  process: any,
+  updateRouteHook?: (route: any) => void,
+  maxRetries: number = 30
+): Promise<boolean> {
+  let retries = 0;
+  
+  while (retries < maxRetries) {
+    try {
+      // Get latest blockhash
+      const latestBlockhash = await connection.getLatestBlockhash();
+      
+      // Confirm transaction status
+      const confirmation = await connection.confirmTransaction({
+        signature: txid,
+        blockhash: latestBlockhash.blockhash,
+        lastValidBlockHeight: latestBlockhash.lastValidBlockHeight
+      });
+
+      // Check if transaction failed
+      if (confirmation.value.err) {
+        if (process && updateRouteHook) {
+          process.status = 'FAILED';
+          process.message = 'Transaction failed on chain';
+          updateRouteHook(process.route);
+        }
+        return false;
+      }
+
+      // Transaction confirmed successfully
+      if (process && updateRouteHook) {
+        process.status = 'DONE';
+        process.doneAt = Date.now();
+        process.message = 'Transaction confirmed';
+        updateRouteHook(process.route);
+      }
+      return true;
+    } catch (error) {
+      console.warn('Confirmation attempt failed:', error);
+      await delay(2000); // Wait 2 seconds before retrying
+      retries++;
+    }
+  }
+
+  // Exceeded maximum retry attempts
+  if (process && updateRouteHook) {
+    process.status = 'FAILED';
+    process.message = 'Transaction confirmation timeout';
+    updateRouteHook(process.route);
+  }
+  throw new Error('Transaction confirmation timeout');
+}
+
+/**
+ * Send and wait for Solana transaction confirmation
+ * 
+ * @param params Transaction parameters
+ * @returns Transaction response and hash
+ */
+export async function sendAndConfirmSolanaTransaction({
+  connection,
+  serializedTransaction,
+  process,
+  updateRouteHook
+}: SolanaTransactionParams): Promise<any> {
+  try {
+    // Send transaction and get transaction hash
+    const txid = await sendSolanaTransaction(connection, serializedTransaction, process, updateRouteHook);
+    
+    // Wait for transaction confirmation
+    const success = await confirmSolanaTransaction(connection, txid, process, updateRouteHook);
+    
+    if (!success) {
+      throw new Error('Transaction failed during confirmation');
+    }
+
+    // Get transaction details
+    const response = await connection.getTransaction(txid, {
+      commitment: "confirmed",
+      maxSupportedTransactionVersion: 0
+    });
+
+    if (!response) {
+      throw new Error('Failed to fetch transaction details');
+    }
+
+    return { response, txid };
+  } catch (error) {
+    console.error('Transaction failed:', error);
+    throw error;
+  }
+}

package/src/stores/StoreProvider.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react'
+import type { WidgetConfigProps } from '../types/widget.js'
+import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js'
+import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js'
+import { FormStoreProvider } from './form/FormStore.js'
+import { HeaderStoreProvider } from './header/useHeaderStore.js'
+import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
+import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore.js'
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+  formRef,
+}) => {
+  return (
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions?.split || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+          <FormStoreProvider formRef={formRef}>
+            <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+              <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                {children}
+              </RouteExecutionStoreProvider>
+            </ChainOrderStoreProvider>
+          </FormStoreProvider>
+        </BookmarkStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
+  )
+}

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useRef } from 'react'
+import { shallow } from 'zustand/shallow'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createBookmarksStore } from './createBookmarkStore.js'
+import type { BookmarkState, BookmarkStore } from './types.js'
+
+export const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { toAddress } = useWidgetConfig()
+  const storeRef = useRef<BookmarkStore>(null)
+
+  if (!storeRef.current) {
+    storeRef.current = createBookmarksStore({ ...props, toAddress })
+  }
+
+  return (
+    <BookmarkStoreContext.Provider value={storeRef.current}>
+      {children}
+    </BookmarkStoreContext.Provider>
+  )
+}
+
+export function useBookmarkStore<T>(
+  selector: (store: BookmarkState) => T,
+  equalityFunction = shallow
+) {
+  const useStore = useContext(BookmarkStoreContext)
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`
+    )
+  }
+
+  return useStore(selector, equalityFunction)
+}

package/src/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,81 @@
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { ToAddress } from '../../types/widget.js'
+import type { PersistStoreProps } from '../types.js'
+import type { BookmarkState } from './types.js'
+
+const recentWalletsLimit = 10
+
+interface PersistBookmarkProps extends PersistStoreProps {
+  toAddress?: ToAddress
+}
+export const createBookmarksStore = ({
+  namePrefix,
+  toAddress,
+}: PersistBookmarkProps) =>
+  createWithEqualityFn<BookmarkState>(
+    persist(
+      (set, get) => ({
+        selectedBookmark: toAddress,
+        bookmarks: [],
+        recentWallets: [],
+        getBookmark: (address) =>
+          get().bookmarks.find((bookmark) => bookmark.address === address),
+        addBookmark: (bookmark) => {
+          set((state) => ({
+            bookmarks: [bookmark, ...state.bookmarks],
+          }))
+        },
+        removeBookmark: (address) => {
+          set((state) => ({
+            bookmarks: state.bookmarks.filter(
+              (storedBookmark) => storedBookmark.address !== address
+            ),
+          }))
+        },
+        getSelectedBookmark: () => get().selectedBookmark,
+        setSelectedBookmark: (bookmark) => {
+          set((_state) => ({
+            selectedBookmark: bookmark,
+          }))
+        },
+        addRecentWallet: (bookmark) => {
+          set((state) => ({
+            recentWallets: [
+              bookmark,
+              ...state.recentWallets.filter(
+                (recentWallet) => recentWallet.address !== bookmark.address
+              ),
+            ].slice(0, recentWalletsLimit),
+          }))
+        },
+        removeRecentWallet: (address) => {
+          set((state) => ({
+            recentWallets: state.recentWallets.filter(
+              (storedRecent) => storedRecent.address !== address
+            ),
+          }))
+        },
+      }),
+      {
+        name: `${namePrefix || 'openocean'}-bookmarks`,
+        version: 0,
+        partialize: (state) => ({
+          bookmarks: state.bookmarks,
+          recentWallets: state.recentWallets,
+        }),
+        onRehydrateStorage: () => {
+          return (state) => {
+            if (state && toAddress && !toAddress.name) {
+              const existingBookmark = state.getBookmark(toAddress.address)
+              if (existingBookmark) {
+                state.setSelectedBookmark(existingBookmark)
+              }
+            }
+          }
+        },
+      }
+    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
+    Object.is
+  )

package/src/stores/bookmarks/types.ts

@@ -0,0 +1,27 @@
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { ToAddress } from '../../types/widget.js'
+
+export interface Bookmark extends ToAddress {
+  isConnectedAccount?: boolean
+}
+
+export interface BookmarkProps {
+  selectedBookmark?: Bookmark
+  bookmarks: Bookmark[]
+  recentWallets: Bookmark[]
+}
+
+export interface BookmarkActions {
+  getBookmark: (address: string) => Bookmark | undefined
+  addBookmark: (bookmark: Bookmark) => void
+  removeBookmark: (address: string) => void
+  setSelectedBookmark: (bookmark?: Bookmark) => void
+  getSelectedBookmark: () => Bookmark | undefined
+  addRecentWallet: (bookmark: Bookmark) => void
+  removeRecentWallet: (address: string) => void
+}
+
+export type BookmarkState = BookmarkProps & BookmarkActions
+
+export type BookmarkStore = UseBoundStoreWithEqualityFn<StoreApi<BookmarkState>>

package/src/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,20 @@
+import { shallow } from 'zustand/shallow'
+import { useBookmarkStore } from './BookmarkStore.js'
+import type { BookmarkActions } from './types.js'
+
+export const useBookmarkActions = () => {
+  const actions = useBookmarkStore<BookmarkActions>(
+    (store) => ({
+      getBookmark: store.getBookmark,
+      addBookmark: store.addBookmark,
+      removeBookmark: store.removeBookmark,
+      setSelectedBookmark: store.setSelectedBookmark,
+      getSelectedBookmark: store.getSelectedBookmark,
+      addRecentWallet: store.addRecentWallet,
+      removeRecentWallet: store.removeRecentWallet,
+    }),
+    shallow
+  )
+
+  return actions
+}

package/src/stores/bookmarks/useBookmarks.ts

@@ -0,0 +1,16 @@
+import { shallow } from 'zustand/shallow'
+import { useBookmarkStore } from './BookmarkStore.js'
+import type { BookmarkProps } from './types.js'
+
+export const useBookmarks = (): BookmarkProps => {
+  const [bookmarks, selectedBookmark, recentWallets] = useBookmarkStore(
+    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets],
+    shallow
+  )
+
+  return {
+    bookmarks,
+    selectedBookmark,
+    recentWallets,
+  }
+}

package/src/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,100 @@
+import { createContext, useContext, useEffect, useRef } from 'react'
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import { useChains } from '../../hooks/useChains.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { isItemAllowed } from '../../utils/item.js'
+import type { FormType } from '../form/types.js'
+import { useFieldActions } from '../form/useFieldActions.js'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createChainOrderStore } from './createChainOrderStore.js'
+import type { ChainOrderState } from './types.js'
+
+export type ChainOrderStore = UseBoundStoreWithEqualityFn<
+  StoreApi<ChainOrderState>
+>
+
+export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
+  null
+)
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const { chains: chainsConfig } = useWidgetConfig()
+  const storeRef = useRef<ChainOrderStore>(null)
+  const { chains } = useChains()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { externalChainTypes, useExternalWalletProvidersOnly } =
+    useExternalWalletProvider()
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props)
+  }
+
+  useEffect(() => {
+    if (chains) {
+      ;(['from', 'to'] as FormType[]).forEach((key) => {
+        const configChainIds = chainsConfig?.[key]
+        const isFromKey = key === 'from'
+
+        const filteredChains = chains.filter((chain) => {
+          const passesChainsConfigFilter = configChainIds
+            ? isItemAllowed(chain.id, configChainIds)
+            : true
+          // If the integrator uses external wallet management and has not opted in for partial wallet management,
+          // restrict the displayed chains to those compatible with external wallet management.
+          // This ensures users only see chains for which they can sign transactions.
+          const passesWalletConfigFilter = isFromKey
+            ? !useExternalWalletProvidersOnly ||
+              externalChainTypes.includes(chain.chainType)
+            : true
+          return passesChainsConfigFilter && passesWalletConfigFilter
+        })
+        const chainOrder = storeRef.current?.getState().initializeChains(
+          filteredChains.map((chain) => chain.id),
+          key
+        )
+        if (chainOrder) {
+          const [chainValue] = getFieldValues(`${key}Chain`)
+          if (!chainValue) {
+            setFieldValue(`${key}Chain`, chainOrder[0])
+          }
+        }
+      })
+    }
+  }, [
+    chains,
+    chainsConfig,
+    externalChainTypes,
+    getFieldValues,
+    setFieldValue,
+    useExternalWalletProvidersOnly,
+  ])
+
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  )
+}
+
+export function useChainOrderStoreContext() {
+  const useStore = useContext(ChainOrderStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useChainOrderStore<T>(
+  selector: (state: ChainOrderState) => T,
+  equalityFn?: (left: T, right: T) => boolean
+): T {
+  const useStore = useChainOrderStoreContext()
+  return useStore(selector, equalityFn)
+}

package/src/stores/chains/createChainOrderStore.ts

@@ -0,0 +1,87 @@
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { PersistStoreProps } from '../types.js'
+import type { ChainOrderState } from './types.js'
+
+export const maxChainsToOrder = 9
+export const maxChainsToShow = 10
+const defaultChainState = {
+  from: [],
+  to: [],
+}
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: defaultChainState,
+        availableChains: defaultChainState,
+        initializeChains: (chainIds, type) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].filter((chainId) =>
+              chainIds.includes(chainId)
+            )
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId)
+            )
+            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: {
+                  ...state.availableChains,
+                  [type]: chainIds,
+                },
+                chainOrder: {
+                  ...state.chainOrder,
+                  [type]: chainOrder,
+                },
+              }
+            }
+            const chainsToAddLength = maxChainsToOrder - chainOrder.length
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index])
+            }
+            return {
+              availableChains: {
+                ...state.availableChains,
+                [type]: chainIds,
+              },
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            }
+          })
+          return get().chainOrder[type]
+        },
+        setChain: (chainId, type) => {
+          const state = get()
+          if (
+            state.chainOrder[type].includes(chainId) ||
+            !state.availableChains[type].includes(chainId)
+          ) {
+            return
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].slice()
+            chainOrder.unshift(chainId)
+            if (chainOrder.length > maxChainsToOrder) {
+              chainOrder.pop()
+            }
+            return {
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            }
+          })
+        },
+      }),
+      {
+        name: `${namePrefix || 'openocean'}-widget-chains-order`,
+        version: 2,
+        partialize: (state) => ({ chainOrder: state.chainOrder }),
+      }
+    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
+    Object.is
+  )

package/src/stores/chains/types.ts

@@ -0,0 +1,17 @@
+import type { FormType } from '../form/types.js'
+
+export interface ChainOrderProps {
+  chainOrder: {
+    from: number[]
+    to: number[]
+  }
+  availableChains: {
+    from: number[]
+    to: number[]
+  }
+}
+
+export interface ChainOrderState extends ChainOrderProps {
+  initializeChains(chainIds: number[], type: FormType): number[]
+  setChain(chainId: number, type: FormType): void
+}

package/src/stores/chains/useChainOrder.ts

@@ -0,0 +1,12 @@
+import { shallow } from 'zustand/shallow'
+import type { FormType } from '../form/types.js'
+import { useChainOrderStore } from './ChainOrderStore.js'
+
+export const useChainOrder = (
+  type: FormType
+): [number[], (chainId: number, type: FormType) => void] => {
+  return useChainOrderStore(
+    (state) => [state.chainOrder[type], state.setChain],
+    shallow
+  )
+}