improve speed of market swap

components/swap/useQuoteRoutes.ts

@@ -16,7 +16,7 @@ type useQuoteRoutesPropTypes = {
   amount: string
   slippage: number
   swapMode: string
-  wallet: string | undefined | null
+  wallet: string | undefined
   mode?: SwapModes
   enabled?: () => boolean
 }
@@ -117,41 +117,38 @@ export const handleGetRoutes = async (
   slippage = 50,
   swapMode = 'ExactIn',
   feeBps = 0,
-  wallet: string | undefined | null,
+  wallet: string | undefined,
   mode: SwapModes = 'ALL',
   jupiterOnlyDirectRoutes = false,
 ) => {
   try {
     wallet ||= PublicKey.default.toBase58()
-    const mangoRoute = fetchMangoRoutes(
-      inputMint,
-      outputMint,
-      amount,
-      slippage,
-      swapMode,
-      feeBps,
-      wallet,
-    )
-    const jupiterRoute = fetchJupiterRoutes(
-      inputMint,
-      outputMint,
-      amount,
-      slippage,
-      swapMode,
-      feeBps,
-      jupiterOnlyDirectRoutes,
-    )
 
     const routes = []
-    if (mode == 'ALL') {
+
+    if (mode === 'ALL' || mode === 'MANGO') {
+      const mangoRoute = fetchMangoRoutes(
+        inputMint,
+        outputMint,
+        amount,
+        slippage,
+        swapMode,
+        feeBps,
+        wallet,
+      )
       routes.push(mangoRoute)
-      routes.push(jupiterRoute)
     }
 
-    if (mode === 'MANGO') {
-      routes.push(mangoRoute)
-    }
-    if (mode === 'JUPITER') {
+    if (mode === 'ALL' || mode === 'JUPITER') {
+      const jupiterRoute = fetchJupiterRoutes(
+        inputMint,
+        outputMint,
+        amount,
+        slippage,
+        swapMode,
+        feeBps,
+        jupiterOnlyDirectRoutes,
+      )
       routes.push(jupiterRoute)
     }
 
@@ -234,7 +231,7 @@ const useQuoteRoutes = ({
     {
       cacheTime: 1000 * 60,
       staleTime: 1000 * 3,
-      enabled: enabled ? enabled() : amount ? true : false,
+      enabled: enabled ? enabled() : nativeAmount.toNumber() ? true : false,
       refetchInterval: 20000,
       retry: 3,
     },

components/trade/SpotMarketOrderSwapForm.tsx

@@ -14,16 +14,12 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useWallet } from '@solana/wallet-adapter-react'
 import useIpAddress from 'hooks/useIpAddress'
 import { useTranslation } from 'next-i18next'
-import { FormEvent, useCallback, useMemo, useState } from 'react'
+import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import Loading from '@components/shared/Loading'
 import Button from '@components/shared/Button'
 import Image from 'next/image'
 import useQuoteRoutes from '@components/swap/useQuoteRoutes'
-import {
-  HealthType,
-  Serum3Market,
-  fetchJupiterTransaction,
-} from '@blockworks-foundation/mango-v4'
+import { HealthType, Serum3Market } from '@blockworks-foundation/mango-v4'
 import Decimal from 'decimal.js'
 import { notify } from 'utils/notifications'
 import * as sentry from '@sentry/nextjs'
@@ -42,6 +38,11 @@ import { formatTokenSymbol } from 'utils/tokens'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import { useTokenMax } from '@components/swap/useTokenMax'
 import SheenLoader from '@components/shared/SheenLoader'
+import { fetchJupiterTransaction } from '@components/swap/SwapReviewRouteInfo'
+import {
+  AddressLookupTableAccount,
+  TransactionInstruction,
+} from '@solana/web3.js'
 
 const set = mangoStore.getState().set
 const slippage = 100
@@ -54,6 +55,11 @@ function stringToNumberOrZero(s: string): number {
   return n
 }
 
+type PreloadedTransaction = {
+  data: [TransactionInstruction[], AddressLookupTableAccount[]]
+  timestamp: number
+}
+
 export default function SpotMarketOrderSwapForm() {
   const { t } = useTranslation()
   const { baseSize, quoteSize, side } = mangoStore((s) => s.tradeForm)
@@ -64,6 +70,7 @@ export default function SpotMarketOrderSwapForm() {
   const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
   const [savedCheckboxSettings, setSavedCheckboxSettings] =
     useLocalStorageState(TRADE_CHECKBOXES_KEY, DEFAULT_CHECKBOX_SETTINGS)
+  const [swapTx, setSwapTx] = useState<PreloadedTransaction>()
   const {
     selectedMarket,
     price: oraclePrice,
@@ -167,14 +174,12 @@ export default function SpotMarketOrderSwapForm() {
     slippage,
     swapMode: 'ExactIn',
     wallet: publicKey?.toBase58(),
+    mode: 'JUPITER',
   })
 
-  const handlePlaceOrder = useCallback(async () => {
-    const client = mangoStore.getState().client
+  const fetchTransaction = useCallback(async () => {
     const group = mangoStore.getState().group
     const mangoAccount = mangoStore.getState().mangoAccount.current
-    const { baseSize, quoteSize, side } = mangoStore.getState().tradeForm
-    const actions = mangoStore.getState().actions
     const connection = mangoStore.getState().connection
 
     if (!group || !mangoAccount) return
@@ -189,7 +194,6 @@ export default function SpotMarketOrderSwapForm() {
     )
       return
 
-    setPlacingOrder(true)
     const [ixs, alts] = await fetchJupiterTransaction(
       connection,
       selectedRoute,
@@ -199,7 +203,37 @@ export default function SpotMarketOrderSwapForm() {
       outputBank.mint,
     )
 
+    setSwapTx({ data: [ixs, alts], timestamp: Date.now() })
+
+    return [ixs, alts]
+  }, [selectedRoute, inputBank, outputBank, publicKey])
+
+  useEffect(() => {
+    if (selectedRoute) fetchTransaction()
+  }, [selectedRoute, fetchTransaction])
+
+  const handlePlaceOrder = useCallback(async () => {
+    const client = mangoStore.getState().client
+    const group = mangoStore.getState().group
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+    const { baseSize, quoteSize, side } = mangoStore.getState().tradeForm
+    const actions = mangoStore.getState().actions
+
+    if (
+      !mangoAccount ||
+      !group ||
+      !inputBank ||
+      !outputBank ||
+      !publicKey ||
+      !selectedRoute ||
+      !swapTx
+    )
+      return
+
+    setPlacingOrder(true)
+
     try {
+      const [ixs, alts] = swapTx.data
       const { signature: tx, slot } = await client.marginTrade({
         group,
         mangoAccount,
@@ -246,7 +280,7 @@ export default function SpotMarketOrderSwapForm() {
     } finally {
       setPlacingOrder(false)
     }
-  }, [inputBank, outputBank, publicKey, selectedRoute])
+  }, [inputBank, outputBank, publicKey, selectedRoute, swapTx])
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -342,7 +376,6 @@ export default function SpotMarketOrderSwapForm() {
   const disabled =
     (connected && (!baseSize || !oraclePrice)) ||
     !serumOrPerpMarket ||
-    parseFloat(baseSize) < serumOrPerpMarket.minOrderSize ||
     isLoading ||
     tooMuchSize
 
@@ -464,7 +497,7 @@ export default function SpotMarketOrderSwapForm() {
               </Checkbox>
             </Tooltip>
           </div>
-          <div className="mt-6 mb-4 flex">
+          <div className="mt-6 mb-4 flex" onMouseEnter={fetchTransaction}>
             {ipAllowed ? (
               <Button
                 className={`flex w-full items-center justify-center ${