blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
mango-ui-v3/components/DepositModal.tsx

302 lines
10 KiB
TypeScript
Raw Permalink Blame History

import React, { FunctionComponent } from 'react'
// import React, { FunctionComponent, useEffect, useState } from 'react'
// import { ExclamationCircleIcon } from '@heroicons/react/solid'
// import Modal from './Modal'
// import Input, { Label } from './Input'
// import AccountSelect from './AccountSelect'
// import { ElementTitle } from './styles'
// import useMangoStore from '../stores/useMangoStore'
// import Loading from './Loading'
// import Button from './Button'
// import InlineNotification from './InlineNotification'
// import { deposit } from '../utils/mango'
// import { notify } from '../utils/notifications'
// import { sleep, trimDecimals } from '../utils'
// import { useTranslation } from 'next-i18next'
// import ButtonGroup from './ButtonGroup'
// import { useWallet } from '@solana/wallet-adapter-react'
// import MangoAccountSelect from './MangoAccountSelect'
// import { MangoAccount } from '@blockworks-foundation/mango-client'
// import { connectionSelector } from 'stores/selectors'
// import { INVESTIN_PROGRAM_ID } from 'utils/tokens'
interface DepositModalProps {
onClose: () => void
isOpen: boolean
repayAmount?: string
tokenSymbol?: string
}
const DepositModal: FunctionComponent<DepositModalProps> = () => {
return null
}
// const DepositModal: FunctionComponent<DepositModalProps> = ({
// isOpen,
// onClose,
// repayAmount,
// tokenSymbol = '',
// }) => {
// const { t } = useTranslation('common')
// const { wallet } = useWallet()
// const [inputAmount, setInputAmount] = useState<string>(repayAmount || '')
// const [submitting, setSubmitting] = useState(false)
// const [invalidAmountMessage, setInvalidAmountMessage] = useState('')
// const [depositPercentage, setDepositPercentage] = useState('')
// const walletTokens = useMangoStore((s) => s.wallet.tokens)
// const actions = useMangoStore((s) => s.actions)
// const [selectedAccount, setSelectedAccount] = useState(walletTokens[0])
// const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
// const mangoAccounts = useMangoStore((s) => s.mangoAccounts)
// const [depositMangoAccount, setDepositMangoAccount] =
// useState<MangoAccount | null>(mangoAccount)
// const connection = useMangoStore(connectionSelector)
// const [isInvestinDelegate, setIsInvestinDelegate] = useState(false)
// useEffect(() => {
// const checkForInvestinDelegate = async () => {
// if (mangoAccount && mangoAccount.owner) {
// const ai = await connection.getAccountInfo(mangoAccount.owner)
// if (ai?.owner.toBase58() === INVESTIN_PROGRAM_ID.toBase58()) {
// setIsInvestinDelegate(true)
// }
// }
// }
// checkForInvestinDelegate()
// }, [mangoAccount])
// useEffect(() => {
// if (tokenSymbol) {
// const symbolAccount = walletTokens.find(
// (a) => a.config.symbol === tokenSymbol
// )
// if (symbolAccount) {
// setSelectedAccount(symbolAccount)
// } else {
// setSelectedAccount(null)
// }
// }
// }, [tokenSymbol, walletTokens])
// const handleAccountSelect = (account) => {
// setInputAmount('')
// setDepositPercentage('')
// setInvalidAmountMessage('')
// setSelectedAccount(account)
// }
// const handleDeposit = () => {
// if (!wallet || !depositMangoAccount) return
// setSubmitting(true)
// deposit({
// amount: parseFloat(inputAmount),
// fromTokenAcc: selectedAccount.account,
// mangoAccount: depositMangoAccount,
// wallet,
// })
// .then((response) => {
// notify({
// title: t('deposit-successful'),
// type: 'success',
// txid: response instanceof Array ? response[1] : response,
// })
// setSubmitting(false)
// onClose()
// sleep(500).then(() => {
// mangoAccount
// ? actions.reloadMangoAccount()
// : actions.fetchAllMangoAccounts(wallet)
// actions.fetchWalletTokens(wallet)
// })
// })
// .catch((err) => {
// notify({
// title: t('deposit-failed'),
// description: err.message,
// txid: err?.txid,
// type: 'error',
// })
// onClose()
// })
// }
// const validateAmountInput = (amount) => {
// if (Number(amount) <= 0) {
// setInvalidAmountMessage(t('enter-amount'))
// }
// if (selectedAccount && Number(amount) > selectedAccount.uiBalance) {
// setInvalidAmountMessage(t('insufficient-balance-deposit'))
// }
// }
// const onChangeAmountInput = (amount) => {
// setInputAmount(amount)
// if (!selectedAccount) {
// setInvalidAmountMessage(t('supported-assets'))
// return
// }
// setDepositPercentage('')
// setInvalidAmountMessage('')
// }
// const onChangeAmountButtons = async (percentage) => {
// setDepositPercentage(percentage)
// if (!selectedAccount) {
// setInvalidAmountMessage(t('supported-assets'))
// return
// }
// const max = selectedAccount.uiBalance
// const amount = ((parseInt(percentage) / 100) * max).toString()
// if (percentage === '100') {
// setInputAmount(amount)
// } else {
// setInputAmount(trimDecimals(amount, 6).toString())
// }
// setInvalidAmountMessage('')
// validateAmountInput(amount)
// }
// // const percentage = repayAmount
// // ? (parseFloat(inputAmount) / parseFloat(repayAmount)) * 100
// // : null
// // const net = repayAmount
// // ? parseFloat(inputAmount) - parseFloat(repayAmount)
// // : null
// // const repayMessage =
// // percentage === 100
// // ? t('repay-full')
// // : typeof percentage === 'number' && percentage > 100
// // ? t('repay-and-deposit', {
// // amount: trimDecimals(net, 6).toString(),
// // symbol: selectedAccount.config.symbol,
// // })
// // : typeof percentage === 'number'
// // ? t('repay-partial', {
// // percentage: percentage.toFixed(2),
// // })
// // : ''
// // const inputDisabled =
// // selectedAccount &&
// // selectedAccount.config.symbol === 'SOL' &&
// // selectedAccount.uiBalance.toString() === inputAmount
// return <div></div>
// // return (
// // <Modal isOpen={isOpen} onClose={onClose}>
// // <Modal.Header>
// // <ElementTitle noMarginBottom>{t('deposit-funds')}</ElementTitle>
// // </Modal.Header>
// // {!mangoAccount ? (
// // <div className="mb-4 mt-2 text-center text-xs text-th-fgd-3">
// // {t('first-deposit-desc')}
// // </div>
// // ) : null}
// // {tokenSymbol && !selectedAccount ? (
// // <div className="mb-4">
// // <InlineNotification
// // desc={t('deposit-help', { tokenSymbol: tokenSymbol })}
// // title={t('no-address', { tokenSymbol: tokenSymbol })}
// // type="error"
// // />
// // </div>
// // ) : null}
// // {repayAmount && selectedAccount?.uiBalance < parseFloat(repayAmount) ? (
// // <div className="mb-4">
// // <InlineNotification
// // desc={t('deposit-before', {
// // tokenSymbol: tokenSymbol,
// // })}
// // title={t('not-enough-balance')}
// // type="warning"
// // />
// // </div>
// // ) : null}
// // {mangoAccounts.length > 1 ? (
// // <div className="mb-4">
// // <Label>{t('to-account')}</Label>
// // <MangoAccountSelect
// // onChange={(v) => setDepositMangoAccount(v)}
// // value={depositMangoAccount}
// // />
// // </div>
// // ) : null}
// // {isInvestinDelegate ? (
// // <div className="mb-4">
// // <InlineNotification
// // title={t('deposit-investin-delegate')}
// // type="error"
// // />
// // </div>
// // ) : null}
// // <AccountSelect
// // accounts={walletTokens}
// // selectedAccount={selectedAccount}
// // onSelectAccount={handleAccountSelect}
// // />
// // <Label className={`mt-4`}>{t('amount')}</Label>
// // <Input
// // type="number"
// // min="0"
// // placeholder="0.00"
// // error={!!invalidAmountMessage}
// // onBlur={(e) => validateAmountInput(e.target.value)}
// // value={inputAmount || ''}
// // onChange={(e) => onChangeAmountInput(e.target.value)}
// // suffix={selectedAccount?.config.symbol}
// // />
// // {invalidAmountMessage ? (
// // <div className="flex items-center pt-1.5 text-th-red">
// // <ExclamationCircleIcon className="mr-1.5 h-4 w-4" />
// // {invalidAmountMessage}
// // </div>
// // ) : null}
// // <div className="pt-1">
// // <ButtonGroup
// // activeValue={depositPercentage}
// // onChange={(v) => onChangeAmountButtons(v)}
// // unit="%"
// // values={['25', '50', '75', '100']}
// // />
// // </div>
// // {selectedAccount?.config.symbol === 'SOL' &&
// // parseFloat(inputAmount) > selectedAccount?.uiBalance - 0.01 ? (
// // <div className="-mb-4 mt-1 text-center text-xs text-th-red">
// // {t('you-must-leave-enough-sol')}
// // </div>
// // ) : null}
// // {repayAmount ? (
// // <div className="pt-3">
// // <InlineNotification desc={repayMessage} type="info" />
// // </div>
// // ) : null}
// // <div className={`flex justify-center pt-6`}>
// // <Button
// // onClick={handleDeposit}
// // className="w-full"
// // disabled={submitting || inputDisabled || isInvestinDelegate}
// // >
// // <div className={`flex items-center justify-center`}>
// // {submitting ? <Loading className="-ml-1 mr-3" /> : null}
// // {t('deposit')}
// // </div>
// // </Button>
// // </div>
// // {!repayAmount ? (
// // <div className="pt-3">
// // <InlineNotification desc={t('interest-info')} type="info" />
// // </div>
// // ) : null}
// // </Modal>
// // )
// }
export default React.memo(DepositModal)
Reference in New Issue View Git Blame Copy Permalink