fix swap form

2022-08-20 00:03:26 -04:00 · 2022-08-20 00:03:26 -04:00 · 1a0baab8e4
parent e36a88ddbd
commit 1a0baab8e4
7 changed files with 91 additions and 85 deletions
--- a/components/TradeSimplePage.tsx
+++ b/components/TradeSimplePage.tsx
@ -1,4 +1,4 @@
-import Swap from './swap/Swap'
+import Swap from './swap/SwapForm'
 import SwapTokenChart from './swap/SwapTokenChart'
 import mangoStore from '../store/state'
 import AccountTabs from './account/AccountTabs'
--- a/components/swap/JupiterRouteInfo.tsx
+++ b/components/swap/JupiterRouteInfo.tsx
@ -24,10 +24,10 @@ import { useTranslation } from 'next-i18next'
 import { Token } from '../../types/jupiter'
 import Image from 'next/image'
 import { formatDecimal } from '../../utils/numbers'
+import { notify } from '../../utils/notifications'

 type JupiterRouteInfoProps = {
  amountIn: Decimal
-  handleSwap: (x: TransactionInstruction[]) => void
  inputTokenInfo: Token | undefined
  jupiter: Jupiter | undefined
  onClose: () => void
@ -36,7 +36,6 @@ type JupiterRouteInfoProps = {
  selectedRoute: RouteInfo | undefined
  setSelectedRoute: Dispatch<SetStateAction<RouteInfo | undefined>>
  slippage: number
-  submitting: boolean
 }

 const parseJupiterRoute = async (
@ -64,8 +63,6 @@ const parseJupiterRoute = async (
 const JupiterRouteInfo = ({
  inputTokenInfo,
  amountIn,
-  handleSwap,
-  submitting,
  onClose,
  jupiter,
  routes,
@ -78,6 +75,7 @@ const JupiterRouteInfo = ({
  const [swapRate, setSwapRate] = useState<boolean>(false)
  const [depositAndFee, setDepositAndFee] = useState<TransactionFeeInfo>()
  const [feeValue, setFeeValue] = useState<number | null>(null)
+  const [submitting, setSubmitting] = useState(false)

  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const jupiterTokens = mangoStore((s) => s.jupiterTokens)
@ -141,14 +139,57 @@ const JupiterRouteInfo = ({

  const onSwap = async () => {
    if (!jupiter || !selectedRoute) return
+    try {
+      const client = mangoStore.getState().client
+      const group = mangoStore.getState().group
+      const actions = mangoStore.getState().actions
+      const mangoAccount = mangoStore.getState().mangoAccount.current
+      const inputBank = mangoStore.getState().swap.inputBank
+      const outputBank = mangoStore.getState().swap.outputBank
+
+      if (!mangoAccount || !group || !inputBank || !outputBank) return
+
      const ixs = await parseJupiterRoute(
        jupiter,
        selectedRoute,
        mangoAccount!.owner
      )
-    await handleSwap(ixs)
+
+      try {
+        setSubmitting(true)
+        const tx = await client.marginTrade({
+          group,
+          mangoAccount,
+          inputMintPk: inputBank.mint,
+          amountIn: amountIn.toNumber(),
+          outputMintPk: outputBank.mint,
+          userDefinedInstructions: ixs,
+          flashLoanType: { swap: {} },
+        })
+
+        notify({
+          title: 'Transaction confirmed',
+          type: 'success',
+          txid: tx,
+        })
+        await actions.reloadAccount()
+      } catch (e: any) {
+        console.log('Error swapping:', e)
+        notify({
+          title: 'Transaction failed',
+          description: e.message,
+          txid: e?.signature,
+          type: 'error',
+        })
+      } finally {
+        setSubmitting(false)
+      }
+    } catch (e) {
+      console.error('Swap error:', e)
+    } finally {
      onClose()
    }
+  }

  return routes?.length && selectedRoute && outputTokenInfo && amountOut ? (
    <div className="flex h-full flex-col justify-between">
--- a/components/swap/LeverageSlider.tsx
+++ b/components/swap/LeverageSlider.tsx
@ -1,7 +1,6 @@
-import { PublicKey } from '@solana/web3.js'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import mangoStore from '../../store/state'
-import { useTokenMax } from './Swap'
+import { useTokenMax } from './SwapForm'

 const LeverageSlider = ({
  amount,
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { PublicKey, TransactionInstruction } from '@solana/web3.js'
+import { PublicKey } from '@solana/web3.js'
 import { ArrowDownIcon, CogIcon } from '@heroicons/react/solid'
 import { RouteInfo } from '@jup-ag/core'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
@ -10,7 +10,6 @@ import mangoStore, {
  OUTPUT_TOKEN_DEFAULT,
 } from '../../store/state'
 import ContentBox from '../shared/ContentBox'
-import { notify } from '../../utils/notifications'
 import JupiterRouteInfo from './JupiterRouteInfo'
 import TokenSelect from '../TokenSelect'
 import useDebounce from '../shared/useDebounce'
@ -35,11 +34,10 @@ const withValueLimit = (values: NumberFormatValues): boolean => {
    : true
 }

-const Swap = () => {
+const SwapForm = () => {
  const { t } = useTranslation('common')
  const [selectedRoute, setSelectedRoute] = useState<RouteInfo>()
  const [amountInFormValue, setAmountInFormValue] = useState('')
-  const [submitting, setSubmitting] = useState(false)
  const [animateSwitchArrow, setAnimateSwitchArrow] = useState(0)
  const [showTokenSelect, setShowTokenSelect] = useState('')
  const [showSettings, setShowSettings] = useState(false)
@ -120,50 +118,6 @@ const Swap = () => {
    )
  }, [inputTokenInfo, outputTokenInfo, set, amountOut])

-  const handleSwap = useCallback(
-    async (userDefinedInstructions: TransactionInstruction[]) => {
-      const client = mangoStore.getState().client
-      const group = mangoStore.getState().group
-      const actions = mangoStore.getState().actions
-      const mangoAccount = mangoStore.getState().mangoAccount.current
-      const inputBank = mangoStore.getState().swap.inputBank
-      const outputBank = mangoStore.getState().swap.outputBank
-      if (!mangoAccount || !group || !inputBank || !outputBank) return
-
-      try {
-        setSubmitting(true)
-        const tx = await client.marginTrade({
-          group,
-          mangoAccount,
-          inputMintPk: inputBank.mint,
-          amountIn: parseFloat(debouncedAmountIn),
-          outputMintPk: outputBank.mint,
-          userDefinedInstructions,
-          flashLoanType: 'swap',
-        })
-        console.log('Success swapping:', tx)
-        notify({
-          title: 'Transaction confirmed',
-          type: 'success',
-          txid: tx,
-        })
-
-        await actions.reloadAccount()
-      } catch (e: any) {
-        console.log('Error swapping:', e)
-        notify({
-          title: 'Transaction failed',
-          description: e.message,
-          txid: e?.signature,
-          type: 'error',
-        })
-      } finally {
-        setSubmitting(false)
-      }
-    },
-    [debouncedAmountIn]
-  )
-
  const amountIn: Decimal | null = useMemo(() => {
    return Number(debouncedAmountIn)
      ? new Decimal(debouncedAmountIn)
@ -193,8 +147,6 @@ const Swap = () => {
          onClose={() => setShowConfirm(false)}
          amountIn={amountIn}
          slippage={slippage}
-          handleSwap={handleSwap}
-          submitting={submitting}
          outputTokenInfo={outputTokenInfo}
          jupiter={jupiter}
          routes={routes}
@ -341,12 +293,13 @@ const Swap = () => {
  )
 }

-export default Swap
+export default SwapForm

 export const useTokenMax = () => {
  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const inputBank = mangoStore((s) => s.swap.inputBank)
  const outputBank = mangoStore((s) => s.swap.outputBank)
+  const slippage = mangoStore((s) => s.swap.slippage)

  const tokenInMax = useMemo(() => {
    const group = mangoStore.getState().group
@ -356,7 +309,12 @@ export const useTokenMax = () => {

    const amount = mangoAccount.getTokenBalanceUi(inputBank)
    const amountWithBorrow = mangoAccount
-      ?.getMaxSourceForTokenSwap(group, inputBank.mint, outputBank.mint, 0.94)
+      ?.getMaxSourceForTokenSwap(
+        group,
+        inputBank.mint,
+        outputBank.mint,
+        0.98 - slippage / 10
+      )
      .toNumber()

    return {
@ -370,7 +328,7 @@ export const useTokenMax = () => {
          : 0,
      decimals: inputBank.mintDecimals,
    }
-  }, [inputBank, mangoAccount, outputBank])
+  }, [inputBank, mangoAccount, outputBank, slippage])

  return tokenInMax
 }
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@ -285,7 +285,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
              )}
            </div>
          </div>
-          <div className="-mt-1 h-28 w-1/2 md:h-72 md:w-auto">
+          <div className="mt-2 h-28 w-1/2 md:h-72 md:w-auto">
            <div className="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0">
              <button
                className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
--- a/store/state.ts
+++ b/store/state.ts
@ -313,9 +313,17 @@ const mangoStore = create<MangoStore>(
            const set = get().set
            const client = get().client
            const group = await client.getGroup(GROUP)
+            const inputBank =
+              group?.banksMapByName.get(INPUT_TOKEN_DEFAULT)?.[0]
+            const outputBank =
+              group?.banksMapByName.get(OUTPUT_TOKEN_DEFAULT)?.[0]

            set((state) => {
              state.group = group
+              if (!state.swap.inputBank && !state.swap.outputBank) {
+                state.swap.inputBank = inputBank
+                state.swap.outputBank = outputBank
+              }
            })
          } catch (e) {
            console.error('Error fetching group', e)
--- a/yarn.lock
+++ b/yarn.lock
@ -79,25 +79,25 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

-"@ethersproject/bytes@^5.6.1":
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.6.1.tgz#24f916e411f82a8a60412344bf4a813b917eefe7"
-  integrity sha512-NwQt7cKn5+ZE4uDn+X5RAXLp46E1chXoaMmrxAyA0rblpxz8t58lVkrHXoRIn0lz1joQElQ8410GqhTqMOwc6g==
+"@ethersproject/bytes@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
+  integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
  dependencies:
-    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/logger" "^5.7.0"

-"@ethersproject/logger@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.6.0.tgz#d7db1bfcc22fd2e4ab574cba0bb6ad779a9a3e7a"
-  integrity sha512-BiBWllUROH9w+P21RzoxJKzqoqpkyM1pRnEKG69bulE9TSQD8SAIvTQqIMZmmCO8pUNkgLP1wndX1gKghSpBmg==
+"@ethersproject/logger@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
+  integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==

 "@ethersproject/sha2@^5.5.0":
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.6.1.tgz#211f14d3f5da5301c8972a8827770b6fd3e51656"
-  integrity sha512-5K2GyqcW7G4Yo3uenHegbXRPDgARpWUiXc6RiF7b6i/HXUoWlb7uCARh7BAHg7/qT/Q5ydofNwiZcim9qpjB6g==
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
+  integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
  dependencies:
-    "@ethersproject/bytes" "^5.6.1"
-    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
    hash.js "1.1.7"

 "@hapi/hoek@^9.0.0":
@ -1195,9 +1195,9 @@
  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==

 "@types/node@*":
-  version "18.7.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.6.tgz#31743bc5772b6ac223845e18c3fc26f042713c83"
-  integrity sha512-EdxgKRXgYsNITy5mjjXjVE/CS8YENSdhiagGrLqjG0pvA2owgJ6i4l7wy/PFZGC0B1/H20lWKN7ONVDNYDZm7A==
+  version "18.7.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.8.tgz#6bbf2be6fbf9c187a5040d4277d24a06a18957a1"
+  integrity sha512-/YP55EMK2341JkODUb8DM9O0x1SIz2aBvyF33Uf1c76St3VpsMXEIW0nxuKkq/5cxnbz0RD9cfwNZHEAZQD3ag==

 "@types/node@17.0.23":
  version "17.0.23"