import { useEffect, useState } from 'react' import { 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 Slider from './Slider' import Loading from './Loading' import WalletIcon from './WalletIcon' import useLargestAccounts from '../hooks/useLargestAccounts' import useVaults from '../hooks/useVaults' import moment from 'moment' import Countdown from 'react-countdown' 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 pool = useWalletStore((s) => s.pool) // const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined const endDeposits = pool ? moment.unix(pool.endDepositsTs.toNumber()) : undefined const usdcBalance = largestAccounts.usdc?.balance || 0 const redeemableBalance = largestAccounts.redeemable?.balance || 0 const totalBalance = usdcBalance + redeemableBalance 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) 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) } const onChangeSlider = (percentage) => { const newContribution = Math.round(percentage * totalBalance) / 100 setWalletAmount(totalBalance - newContribution) setContributionAmount(newContribution) } const handleMax = () => { setWalletAmount(0) setContributionAmount(totalBalance) 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 renderCountdown = ({ hours, minutes, seconds, completed }) => { const now = new Date().getTime() / 1000 const message = now > pool.endDepositsTs.toNumber() && now < pool.endIdoTs.toNumber() ? 'Deposits are closed' : 'The IDO has ended' if (completed) { return
{message}
} else { 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
{pool ? (Withdrawals Close
{pool ? (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'}
*/}