fetch tx when clicking swap
This commit is contained in:
parent
8fee400e4f
commit
21a4c11673
|
@ -14,7 +14,7 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||||
import { useWallet } from '@solana/wallet-adapter-react'
|
import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
import useIpAddress from 'hooks/useIpAddress'
|
import useIpAddress from 'hooks/useIpAddress'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
import { FormEvent, useCallback, useMemo, useState } from 'react'
|
||||||
import Loading from '@components/shared/Loading'
|
import Loading from '@components/shared/Loading'
|
||||||
import Button from '@components/shared/Button'
|
import Button from '@components/shared/Button'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
@ -39,10 +39,6 @@ import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||||
import { useTokenMax } from '@components/swap/useTokenMax'
|
import { useTokenMax } from '@components/swap/useTokenMax'
|
||||||
import SheenLoader from '@components/shared/SheenLoader'
|
import SheenLoader from '@components/shared/SheenLoader'
|
||||||
import { fetchJupiterTransaction } from '@components/swap/SwapReviewRouteInfo'
|
import { fetchJupiterTransaction } from '@components/swap/SwapReviewRouteInfo'
|
||||||
import {
|
|
||||||
AddressLookupTableAccount,
|
|
||||||
TransactionInstruction,
|
|
||||||
} from '@solana/web3.js'
|
|
||||||
import MaxSwapAmount from '@components/swap/MaxSwapAmount'
|
import MaxSwapAmount from '@components/swap/MaxSwapAmount'
|
||||||
|
|
||||||
const set = mangoStore.getState().set
|
const set = mangoStore.getState().set
|
||||||
|
@ -55,11 +51,6 @@ function stringToNumberOrZero(s: string): number {
|
||||||
return n
|
return n
|
||||||
}
|
}
|
||||||
|
|
||||||
type PreloadedTransaction = {
|
|
||||||
data: [TransactionInstruction[], AddressLookupTableAccount[]]
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SpotMarketOrderSwapForm() {
|
export default function SpotMarketOrderSwapForm() {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { baseSize, quoteSize, side } = mangoStore((s) => s.tradeForm)
|
const { baseSize, quoteSize, side } = mangoStore((s) => s.tradeForm)
|
||||||
|
@ -70,7 +61,6 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
|
const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
|
||||||
const [savedCheckboxSettings, setSavedCheckboxSettings] =
|
const [savedCheckboxSettings, setSavedCheckboxSettings] =
|
||||||
useLocalStorageState(TRADE_CHECKBOXES_KEY, DEFAULT_CHECKBOX_SETTINGS)
|
useLocalStorageState(TRADE_CHECKBOXES_KEY, DEFAULT_CHECKBOX_SETTINGS)
|
||||||
const [swapTx, setSwapTx] = useState<PreloadedTransaction>()
|
|
||||||
const {
|
const {
|
||||||
selectedMarket,
|
selectedMarket,
|
||||||
price: oraclePrice,
|
price: oraclePrice,
|
||||||
|
@ -169,7 +159,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
|
|
||||||
const slippage = mangoStore.getState().swap.slippage
|
const slippage = mangoStore.getState().swap.slippage
|
||||||
|
|
||||||
const { bestRoute: selectedRoute, isLoading } = useQuoteRoutes({
|
const { bestRoute: selectedRoute, isLoading: loadingRoute } = useQuoteRoutes({
|
||||||
inputMint: inputBank?.mint.toString() || '',
|
inputMint: inputBank?.mint.toString() || '',
|
||||||
outputMint: outputBank?.mint.toString() || '',
|
outputMint: outputBank?.mint.toString() || '',
|
||||||
amount: side === 'buy' ? quoteSize : baseSize,
|
amount: side === 'buy' ? quoteSize : baseSize,
|
||||||
|
@ -179,13 +169,14 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
mode: 'JUPITER',
|
mode: 'JUPITER',
|
||||||
})
|
})
|
||||||
|
|
||||||
const fetchTransaction = useCallback(async () => {
|
const handlePlaceOrder = useCallback(async () => {
|
||||||
|
const client = mangoStore.getState().client
|
||||||
const group = mangoStore.getState().group
|
const group = mangoStore.getState().group
|
||||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||||
|
const { baseSize, quoteSize, side } = mangoStore.getState().tradeForm
|
||||||
|
const actions = mangoStore.getState().actions
|
||||||
const connection = mangoStore.getState().connection
|
const connection = mangoStore.getState().connection
|
||||||
|
|
||||||
if (!group || !mangoAccount) return
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!mangoAccount ||
|
!mangoAccount ||
|
||||||
!group ||
|
!group ||
|
||||||
|
@ -196,6 +187,8 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
)
|
)
|
||||||
return
|
return
|
||||||
|
|
||||||
|
setPlacingOrder(true)
|
||||||
|
|
||||||
const [ixs, alts] = await fetchJupiterTransaction(
|
const [ixs, alts] = await fetchJupiterTransaction(
|
||||||
connection,
|
connection,
|
||||||
selectedRoute,
|
selectedRoute,
|
||||||
|
@ -205,37 +198,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
outputBank.mint,
|
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 {
|
try {
|
||||||
const [ixs, alts] = swapTx.data
|
|
||||||
const { signature: tx, slot } = await client.marginTrade({
|
const { signature: tx, slot } = await client.marginTrade({
|
||||||
group,
|
group,
|
||||||
mangoAccount,
|
mangoAccount,
|
||||||
|
@ -282,7 +245,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
} finally {
|
} finally {
|
||||||
setPlacingOrder(false)
|
setPlacingOrder(false)
|
||||||
}
|
}
|
||||||
}, [inputBank, outputBank, publicKey, selectedRoute, swapTx])
|
}, [inputBank, outputBank, publicKey, selectedRoute])
|
||||||
|
|
||||||
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
@ -378,7 +341,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
const disabled =
|
const disabled =
|
||||||
(connected && (!baseSize || !oraclePrice)) ||
|
(connected && (!baseSize || !oraclePrice)) ||
|
||||||
!serumOrPerpMarket ||
|
!serumOrPerpMarket ||
|
||||||
isLoading ||
|
loadingRoute ||
|
||||||
tooMuchSize
|
tooMuchSize
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -450,7 +413,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
}
|
}
|
||||||
name="quote"
|
name="quote"
|
||||||
id="quote"
|
id="quote"
|
||||||
className="-mt-[1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
|
className="mt-[-1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
|
||||||
placeholder="0.00"
|
placeholder="0.00"
|
||||||
value={quoteSize}
|
value={quoteSize}
|
||||||
onValueChange={handleQuoteSizeChange}
|
onValueChange={handleQuoteSizeChange}
|
||||||
|
@ -499,7 +462,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-4 mt-6 flex" onMouseEnter={fetchTransaction}>
|
<div className="mb-4 mt-6 flex">
|
||||||
{ipAllowed ? (
|
{ipAllowed ? (
|
||||||
<Button
|
<Button
|
||||||
className={`flex w-full items-center justify-center ${
|
className={`flex w-full items-center justify-center ${
|
||||||
|
@ -513,7 +476,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
size="large"
|
size="large"
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{loadingRoute ? (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Loading />
|
<Loading />
|
||||||
<span className="hidden sm:block">
|
<span className="hidden sm:block">
|
||||||
|
@ -584,7 +547,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
>
|
>
|
||||||
<p className="tooltip-underline">{t('swap:price-impact')}</p>
|
<p className="tooltip-underline">{t('swap:price-impact')}</p>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{isLoading ? (
|
{loadingRoute ? (
|
||||||
<SheenLoader>
|
<SheenLoader>
|
||||||
<div className="h-3.5 w-12 bg-th-bkg-2" />
|
<div className="h-3.5 w-12 bg-th-bkg-2" />
|
||||||
</SheenLoader>
|
</SheenLoader>
|
||||||
|
@ -666,7 +629,7 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
) : null}
|
) : null}
|
||||||
<div className="flex items-center justify-between text-xs">
|
<div className="flex items-center justify-between text-xs">
|
||||||
<p className="pr-2 text-th-fgd-3">{t('common:route')}</p>
|
<p className="pr-2 text-th-fgd-3">{t('common:route')}</p>
|
||||||
{isLoading ? (
|
{loadingRoute ? (
|
||||||
<SheenLoader>
|
<SheenLoader>
|
||||||
<div className="h-3.5 w-20 bg-th-bkg-2" />
|
<div className="h-3.5 w-20 bg-th-bkg-2" />
|
||||||
</SheenLoader>
|
</SheenLoader>
|
||||||
|
|
Loading…
Reference in New Issue