diff --git a/components/DepositForm.tsx b/components/DepositForm.tsx index 57e8d82..f4111c9 100644 --- a/components/DepositForm.tsx +++ b/components/DepositForm.tsx @@ -1,11 +1,7 @@ -import { - ArrowPathIcon, - ChevronDownIcon, - ExclamationCircleIcon, -} from '@heroicons/react/20/solid' +import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid' import { useWallet } from '@solana/wallet-adapter-react' import { useTranslation } from 'next-i18next' -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useMemo, useState } from 'react' import NumberFormat, { NumberFormatValues } from 'react-number-format' import mangoStore from '@store/mangoStore' import { notify } from '../utils/notifications' @@ -24,17 +20,11 @@ import SecondaryConnectButton from './shared/SecondaryConnectButton' import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts' import InlineNotification from './shared/InlineNotification' import Link from 'next/link' -import LeverageSlider from './shared/LeverageSlider' import useMangoGroup from 'hooks/useMangoGroup' -import FormatNumericValue from './shared/FormatNumericValue' -import { depositAndCreate, stakeAndCreate } from 'utils/transactions' +import { depositAndCreate } from 'utils/transactions' // import { MangoAccount } from '@blockworks-foundation/mango-v4' import { AnchorProvider } from '@project-serum/anchor' -import useBankRates from 'hooks/useBankRates' -import { Disclosure } from '@headlessui/react' import SheenLoader from './shared/SheenLoader' -import useLeverageMax from 'hooks/useLeverageMax' -import { STAKEABLE_TOKENS_DATA } from 'utils/constants' import { sleep } from 'utils' import ButtonGroup from './forms/ButtonGroup' import Decimal from 'decimal.js' @@ -42,32 +32,31 @@ import Decimal from 'decimal.js' const set = mangoStore.getState().set export const NUMBERFORMAT_CLASSES = - 'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4' + 'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4' interface StakeFormProps { - token: string + token: string } export const walletBalanceForToken = ( - walletTokens: TokenAccount[], - token: string, + walletTokens: TokenAccount[], + token: string, ): { maxAmount: number; maxDecimals: number } => { - const group = mangoStore.getState().group - const bank = group?.banksMapByName.get(token)?.[0] + const group = mangoStore.getState().group + const bank = group?.banksMapByName.get(token)?.[0] - let walletToken - if (bank) { - const tokenMint = bank?.mint - walletToken = tokenMint - ? walletTokens.find((t) => t.mint.toString() === tokenMint.toString()) - : null - } + let walletToken + if (bank) { + const tokenMint = bank?.mint + walletToken = tokenMint + ? walletTokens.find((t) => t.mint.toString() === tokenMint.toString()) + : null + } - - return { - maxAmount: walletToken ? walletToken.uiAmount : 0, - maxDecimals: bank?.mintDecimals || 6, - } + return { + maxAmount: walletToken ? walletToken.uiAmount : 0, + maxDecimals: bank?.mintDecimals || 6, + } } // const getNextAccountNumber = (accounts: MangoAccount[]): number => { @@ -84,242 +73,240 @@ export const walletBalanceForToken = ( // } function DespositForm({ token: selectedToken }: StakeFormProps) { - const { t } = useTranslation(['common', 'account']) - const [inputAmount, setInputAmount] = useState('') - const submitting = mangoStore((s) => s.submittingBoost) - const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false) - const { maxSolDeposit } = useSolBalance() - const { usedTokens, totalTokens } = useMangoAccountAccounts() - const { group } = useMangoGroup() - const groupLoaded = mangoStore((s) => s.groupLoaded) - const { connected, publicKey } = useWallet() - const walletTokens = mangoStore((s) => s.wallet.tokens) - const [sizePercentage, setSizePercentage] = useState('') + const { t } = useTranslation(['common', 'account']) + const [inputAmount, setInputAmount] = useState('') + const submitting = mangoStore((s) => s.submittingBoost) + const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false) + const { maxSolDeposit } = useSolBalance() + const { usedTokens, totalTokens } = useMangoAccountAccounts() + const { group } = useMangoGroup() + const groupLoaded = mangoStore((s) => s.groupLoaded) + const { connected, publicKey } = useWallet() + const walletTokens = mangoStore((s) => s.wallet.tokens) + const [sizePercentage, setSizePercentage] = useState('') - const depositBank = useMemo(() => { - return group?.banksMapByName.get(selectedToken)?.[0] - }, [selectedToken, group]) + const depositBank = useMemo(() => { + return group?.banksMapByName.get(selectedToken)?.[0] + }, [selectedToken, group]) - const tokenMax = useMemo(() => { - return walletBalanceForToken(walletTokens, selectedToken) - }, [walletTokens, selectedToken]) + const tokenMax = useMemo(() => { + return walletBalanceForToken(walletTokens, selectedToken) + }, [walletTokens, selectedToken]) - const setMax = useCallback(() => { - const max = floorToDecimal(tokenMax.maxAmount, 6) - setInputAmount(max.toFixed()) - }, [tokenMax]) + const setMax = useCallback(() => { + const max = floorToDecimal(tokenMax.maxAmount, 6) + setInputAmount(max.toFixed()) + }, [tokenMax]) - const handleRefreshWalletBalances = useCallback(async () => { - if (!publicKey) return - const actions = mangoStore.getState().actions - setRefreshingWalletTokens(true) - await actions.fetchWalletTokens(publicKey) - setRefreshingWalletTokens(false) - }, [publicKey]) + const handleRefreshWalletBalances = useCallback(async () => { + if (!publicKey) return + const actions = mangoStore.getState().actions + setRefreshingWalletTokens(true) + await actions.fetchWalletTokens(publicKey) + setRefreshingWalletTokens(false) + }, [publicKey]) - const tokenPositionsFull = useMemo(() => { - if (!depositBank || !usedTokens.length || !totalTokens.length) return false - const hasTokenPosition = usedTokens.find( - (token) => token.tokenIndex === depositBank.tokenIndex, + const tokenPositionsFull = useMemo(() => { + if (!depositBank || !usedTokens.length || !totalTokens.length) return false + const hasTokenPosition = usedTokens.find( + (token) => token.tokenIndex === depositBank.tokenIndex, + ) + return hasTokenPosition ? false : usedTokens.length >= totalTokens.length + }, [depositBank, usedTokens, totalTokens]) + + const handleDeposit = useCallback(async () => { + const client = mangoStore.getState().client + const group = mangoStore.getState().group + const actions = mangoStore.getState().actions + const mangoAccounts = mangoStore.getState().mangoAccounts + const mangoAccount = mangoStore.getState().mangoAccount.current + + if (!group || !depositBank || !publicKey) return + + set((state) => { + state.submittingBoost = true + }) + try { + notify({ + title: 'Building transaction. This may take a moment.', + type: 'info', + }) + const { signature: tx, slot } = await depositAndCreate( + client, + group, + mangoAccount, + depositBank.mint, + parseFloat(inputAmount), + mangoAccounts?.length + 1 ?? 0, + ) + notify({ + title: 'Transaction confirmed', + type: 'success', + txid: tx, + }) + set((state) => { + state.submittingBoost = false + }) + setInputAmount('') + await sleep(500) + if (!mangoAccount) { + await actions.fetchMangoAccounts( + (client.program.provider as AnchorProvider).wallet.publicKey, ) - return hasTokenPosition ? false : usedTokens.length >= totalTokens.length - }, [depositBank, usedTokens, totalTokens]) + } + await actions.reloadMangoAccount(slot) + await actions.fetchWalletTokens(publicKey) + } catch (e) { + console.error('Error depositing:', e) + set((state) => { + state.submittingBoost = false + }) + if (!isMangoError(e)) return + notify({ + title: 'Transaction failed', + description: e.message, + txid: e?.txid, + type: 'error', + }) + } + }, [depositBank, publicKey, inputAmount]) - const handleDeposit = useCallback(async () => { - const client = mangoStore.getState().client - const group = mangoStore.getState().group - const actions = mangoStore.getState().actions - const mangoAccounts = mangoStore.getState().mangoAccounts - const mangoAccount = mangoStore.getState().mangoAccount.current + const showInsufficientBalance = + tokenMax.maxAmount < Number(inputAmount) || + (selectedToken === 'USDC' && maxSolDeposit <= 0) - if (!group || !depositBank || !publicKey) return + const handleSizePercentage = useCallback( + (percentage: string) => { + if (!depositBank) return + setSizePercentage(percentage) + const amount = floorToDecimal( + new Decimal(percentage).div(100).mul(tokenMax.maxAmount), + depositBank.mintDecimals, + ) + setInputAmount(amount.toFixed()) + }, + [tokenMax, depositBank], + ) - set((state) => { - state.submittingBoost = true - }) - try { - notify({ - title: 'Building transaction. This may take a moment.', - type: 'info', - }) - const { signature: tx, slot } = await depositAndCreate( - client, - group, - mangoAccount, - depositBank.mint, - parseFloat(inputAmount), - mangoAccounts?.length + 1 ?? 0, - ) - notify({ - title: 'Transaction confirmed', - type: 'success', - txid: tx, - }) - set((state) => { - state.submittingBoost = false - }) - setInputAmount('') - await sleep(500) - if (!mangoAccount) { - await actions.fetchMangoAccounts( - (client.program.provider as AnchorProvider).wallet.publicKey, - ) - } - await actions.reloadMangoAccount(slot) - await actions.fetchWalletTokens(publicKey) - } catch (e) { - console.error('Error depositing:', e) - set((state) => { - state.submittingBoost = false - }) - if (!isMangoError(e)) return - notify({ - title: 'Transaction failed', - description: e.message, - txid: e?.txid, - type: 'error', - }) - } - }, [depositBank, publicKey, inputAmount]) - - const showInsufficientBalance = - tokenMax.maxAmount < Number(inputAmount) || - (selectedToken === 'USDC' && maxSolDeposit <= 0) - - const handleSizePercentage = useCallback( - (percentage: string) => { - if (!depositBank) return - setSizePercentage(percentage) - const amount = floorToDecimal( - new Decimal(percentage).div(100).mul(tokenMax.maxAmount), - depositBank.mintDecimals, - ) - setInputAmount(amount.toFixed()) - }, - [tokenMax, depositBank], - ) - - - return ( - <> -
{`You have ${numberOfPositions} active position${numberOfPositions !== 1 ? 's' : '' - }`}
+{`You have ${numberOfPositions} active position${ + numberOfPositions !== 1 ? 's' : '' + }`}
Leverage
@@ -225,8 +218,7 @@ const PositionItem = ({