diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx index 41f1d1f..d0fe906 100644 --- a/components/ContributionModal.tsx +++ b/components/ContributionModal.tsx @@ -9,13 +9,13 @@ 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 moment from 'moment' -import Countdown from 'react-countdown' +import usePool from '../hooks/usePool' const ContributionModal = () => { const actions = useWalletStore((s) => s.actions) @@ -23,13 +23,7 @@ const ContributionModal = () => { 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 { endIdo, endDeposits } = usePool() const usdcBalance = largestAccounts.usdc?.balance || 0 const redeemableBalance = largestAccounts.redeemable?.balance || 0 @@ -79,7 +73,7 @@ const ContributionModal = () => { const onChangeAmountInput = (amount) => { setWalletAmount(totalBalance - amount) setContributionAmount(amount) - if (endDeposits.isBefore() && amount > redeemableBalance) { + if (endDeposits?.isBefore() && amount > redeemableBalance) { setErrorMessage('Deposits ended, contribution can not increase') setTimeout(() => setErrorMessage(null), 4000) } @@ -87,7 +81,7 @@ const ContributionModal = () => { const onChangeSlider = (percentage) => { let newContribution = Math.round(percentage * totalBalance) / 100 - if (endDeposits.isBefore() && newContribution > redeemableBalance) { + if (endDeposits?.isBefore() && newContribution > redeemableBalance) { newContribution = redeemableBalance setErrorMessage('Deposits ended, contribution can not increase') setTimeout(() => setErrorMessage(null), 4000) @@ -98,7 +92,7 @@ const ContributionModal = () => { } const handleMax = () => { - if (endDeposits.isAfter()) { + if (endDeposits?.isAfter()) { setWalletAmount(0) setContributionAmount(totalBalance) } else { @@ -136,36 +130,9 @@ const ContributionModal = () => { const disableFormInputs = submitted || !connected || loading const dontAddMore = - endDeposits.isBefore() && contributionAmount > redeemableBalance + endDeposits?.isBefore() && contributionAmount > redeemableBalance const disableSubmit = disableFormInputs || walletAmount < 0 || dontAddMore - 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 ( -Total USDC Deposited
Deposits Close
- {pool ? ( -Withdrawals Close
- {pool ? ( -Start: {startIdo?.fromNow()} ({startIdo?.format()}) diff --git a/components/PoolCountdown.tsx b/components/PoolCountdown.tsx new file mode 100644 index 0000000..f0050b4 --- /dev/null +++ b/components/PoolCountdown.tsx @@ -0,0 +1,40 @@ +import usePool from '../hooks/usePool' +import Countdown from 'react-countdown' +import moment from 'moment' + +const PoolCountdown = (props: { date: moment.Moment }) => { + const { endIdo, endDeposits } = usePool() + const renderCountdown = ({ hours, minutes, seconds, completed }) => { + const message = + endDeposits?.isBefore() && endIdo?.isAfter() + ? 'Deposits are closed' + : 'The IDO has ended' + if (completed) { + return
{message}
+ } else { + return ( +{props.title}
+ {props.children} +