import { useEffect, useState } from 'react' import { ExclamationCircleIcon, LockClosedIcon, LockOpenIcon, } from '@heroicons/react/outline' import { LinkIcon } from '@heroicons/react/solid' import useWalletStore from '../stores/useWalletStore' import Input from './Input' import Button from './Button' import { ConnectWalletButtonSmall } from './ConnectWalletButton' import PoolCountdown from './PoolCountdown' import Slider from './Slider' import Loading from './Loading' import WalletIcon from './WalletIcon' import useLargestAccounts from '../hooks/useLargestAccounts' import useVaults from '../hooks/useVaults' import usePool from '../hooks/usePool' const ContributionModal = () => { const actions = useWalletStore((s) => s.actions) const connected = useWalletStore((s) => s.connected) const wallet = useWalletStore((s) => s.current) const largestAccounts = useLargestAccounts() const vaults = useVaults() const { endIdo, endDeposits } = usePool() const usdcBalance = largestAccounts.usdc?.balance || 0 const redeemableBalance = largestAccounts.redeemable?.balance || 0 const totalBalance = usdcBalance + redeemableBalance // const mangoRedeemable = vaults.usdc // ? (redeemableBalance * vaults.mango.balance) / vaults.usdc.balance // : 0 const [walletAmount, setWalletAmount] = useState(0) const [contributionAmount, setContributionAmount] = useState(0) const [submitting, setSubmitting] = useState(false) const [submitted, setSubmitted] = useState(false) const [editContribution, setEditContribution] = useState(false) const [loading, setLoading] = useState(true) const [maxButtonTransition, setMaxButtonTransition] = useState(false) const [errorMessage, setErrorMessage] = useState(null) useEffect(() => { console.log('refresh modal on balance change') setWalletAmount(usdcBalance) setContributionAmount(redeemableBalance) if (redeemableBalance > 0) { setSubmitted(true) } }, [totalBalance]) const handleConnectDisconnect = () => { if (connected) { setSubmitted(false) setEditContribution(false) wallet.disconnect() } else { wallet.connect() } } const handleSetContribution = () => { setSubmitting(true) setEditContribution(false) } const handleEditContribution = () => { setEditContribution(true) setSubmitted(false) } const onChangeAmountInput = (amount) => { setWalletAmount(totalBalance - amount) setContributionAmount(amount) if (endDeposits?.isBefore() && amount > redeemableBalance) { setErrorMessage('Deposits ended, contribution can not increase') setTimeout(() => setErrorMessage(null), 4000) } } const onChangeSlider = (percentage) => { let newContribution = Math.round(percentage * totalBalance) / 100 if (endDeposits?.isBefore() && newContribution > redeemableBalance) { newContribution = redeemableBalance setErrorMessage('Deposits ended, contribution can not increase') setTimeout(() => setErrorMessage(null), 4000) } setWalletAmount(totalBalance - newContribution) setContributionAmount(newContribution) } const handleMax = () => { if (endDeposits?.isAfter()) { setWalletAmount(0) setContributionAmount(totalBalance) } else { setWalletAmount(usdcBalance) setContributionAmount(redeemableBalance) } setMaxButtonTransition(true) } useEffect(() => { if (maxButtonTransition) { setMaxButtonTransition(false) } }, [maxButtonTransition]) useEffect(() => { setLoading(true) if (largestAccounts.usdc) { setLoading(false) } }, [largestAccounts]) useEffect(() => { if (submitting) { const handleSubmit = async () => { await actions.submitContribution(contributionAmount) setSubmitted(true) setSubmitting(false) } handleSubmit() } }, [submitting]) const disableFormInputs = submitted || !connected || loading const dontAddMore = endDeposits?.isBefore() && contributionAmount > redeemableBalance const disableSubmit = disableFormInputs || walletAmount < 0 || dontAddMore return ( <>
This is the start of something big.
> ) : null} {!submitted && submitting ? ( <>Almost there...
> ) : null} {submitted && !submitting ? ( <>A new seed planted...
> ) : null} {editContribution && !submitting ? ( <>Increase or reduce your contribution...
> ) : null}Estimated Token Price
Total USDC Deposited
Locked MNGO in Pool
Deposits Close
Withdrawals Close
Start: {startIdo?.fromNow()} ({startIdo?.format()})
End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}
Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}
*/}