add mini cards for stats
This commit is contained in:
parent
af07391a53
commit
4a77adb8fc
|
@ -9,13 +9,13 @@ import useWalletStore from '../stores/useWalletStore'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import { ConnectWalletButtonSmall } from './ConnectWalletButton'
|
import { ConnectWalletButtonSmall } from './ConnectWalletButton'
|
||||||
|
import PoolCountdown from './PoolCountdown'
|
||||||
import Slider from './Slider'
|
import Slider from './Slider'
|
||||||
import Loading from './Loading'
|
import Loading from './Loading'
|
||||||
import WalletIcon from './WalletIcon'
|
import WalletIcon from './WalletIcon'
|
||||||
import useLargestAccounts from '../hooks/useLargestAccounts'
|
import useLargestAccounts from '../hooks/useLargestAccounts'
|
||||||
import useVaults from '../hooks/useVaults'
|
import useVaults from '../hooks/useVaults'
|
||||||
import moment from 'moment'
|
import usePool from '../hooks/usePool'
|
||||||
import Countdown from 'react-countdown'
|
|
||||||
|
|
||||||
const ContributionModal = () => {
|
const ContributionModal = () => {
|
||||||
const actions = useWalletStore((s) => s.actions)
|
const actions = useWalletStore((s) => s.actions)
|
||||||
|
@ -23,13 +23,7 @@ const ContributionModal = () => {
|
||||||
const wallet = useWalletStore((s) => s.current)
|
const wallet = useWalletStore((s) => s.current)
|
||||||
const largestAccounts = useLargestAccounts()
|
const largestAccounts = useLargestAccounts()
|
||||||
const vaults = useVaults()
|
const vaults = useVaults()
|
||||||
|
const { endIdo, endDeposits } = usePool()
|
||||||
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 usdcBalance = largestAccounts.usdc?.balance || 0
|
||||||
const redeemableBalance = largestAccounts.redeemable?.balance || 0
|
const redeemableBalance = largestAccounts.redeemable?.balance || 0
|
||||||
|
@ -79,7 +73,7 @@ const ContributionModal = () => {
|
||||||
const onChangeAmountInput = (amount) => {
|
const onChangeAmountInput = (amount) => {
|
||||||
setWalletAmount(totalBalance - amount)
|
setWalletAmount(totalBalance - amount)
|
||||||
setContributionAmount(amount)
|
setContributionAmount(amount)
|
||||||
if (endDeposits.isBefore() && amount > redeemableBalance) {
|
if (endDeposits?.isBefore() && amount > redeemableBalance) {
|
||||||
setErrorMessage('Deposits ended, contribution can not increase')
|
setErrorMessage('Deposits ended, contribution can not increase')
|
||||||
setTimeout(() => setErrorMessage(null), 4000)
|
setTimeout(() => setErrorMessage(null), 4000)
|
||||||
}
|
}
|
||||||
|
@ -87,7 +81,7 @@ const ContributionModal = () => {
|
||||||
|
|
||||||
const onChangeSlider = (percentage) => {
|
const onChangeSlider = (percentage) => {
|
||||||
let newContribution = Math.round(percentage * totalBalance) / 100
|
let newContribution = Math.round(percentage * totalBalance) / 100
|
||||||
if (endDeposits.isBefore() && newContribution > redeemableBalance) {
|
if (endDeposits?.isBefore() && newContribution > redeemableBalance) {
|
||||||
newContribution = redeemableBalance
|
newContribution = redeemableBalance
|
||||||
setErrorMessage('Deposits ended, contribution can not increase')
|
setErrorMessage('Deposits ended, contribution can not increase')
|
||||||
setTimeout(() => setErrorMessage(null), 4000)
|
setTimeout(() => setErrorMessage(null), 4000)
|
||||||
|
@ -98,7 +92,7 @@ const ContributionModal = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMax = () => {
|
const handleMax = () => {
|
||||||
if (endDeposits.isAfter()) {
|
if (endDeposits?.isAfter()) {
|
||||||
setWalletAmount(0)
|
setWalletAmount(0)
|
||||||
setContributionAmount(totalBalance)
|
setContributionAmount(totalBalance)
|
||||||
} else {
|
} else {
|
||||||
|
@ -136,36 +130,9 @@ const ContributionModal = () => {
|
||||||
const disableFormInputs = submitted || !connected || loading
|
const disableFormInputs = submitted || !connected || loading
|
||||||
|
|
||||||
const dontAddMore =
|
const dontAddMore =
|
||||||
endDeposits.isBefore() && contributionAmount > redeemableBalance
|
endDeposits?.isBefore() && contributionAmount > redeemableBalance
|
||||||
const disableSubmit = disableFormInputs || walletAmount < 0 || dontAddMore
|
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 <p className="text-secondary-2-light">{message}</p>
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div className="font-bold pt-2 text-fgd-1 text-base">
|
|
||||||
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
|
||||||
{hours < 10 ? `0${hours}` : hours}
|
|
||||||
</span>
|
|
||||||
:
|
|
||||||
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
|
||||||
{minutes < 10 ? `0${minutes}` : minutes}
|
|
||||||
</span>
|
|
||||||
:
|
|
||||||
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
|
||||||
{seconds < 10 ? `0${seconds}` : seconds}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
|
<div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
|
||||||
|
@ -341,9 +308,7 @@ const ContributionModal = () => {
|
||||||
className={`mr-2`}
|
className={`mr-2`}
|
||||||
/>
|
/>
|
||||||
<div className="font-bold text-fgd-1 text-xl">
|
<div className="font-bold text-fgd-1 text-xl">
|
||||||
{vaults.usdc && vaults.mango
|
{vaults.estimatedPrice}
|
||||||
? `$${vaults.usdc.balance / vaults.mango.balance}`
|
|
||||||
: 'N/A'}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -351,7 +316,7 @@ const ContributionModal = () => {
|
||||||
<p className="text-fgd-3">Total USDC Deposited</p>
|
<p className="text-fgd-3">Total USDC Deposited</p>
|
||||||
<div className="flex items-center justify-center pt-0.5">
|
<div className="flex items-center justify-center pt-0.5">
|
||||||
<div className="font-bold text-fgd-1 text-base">
|
<div className="font-bold text-fgd-1 text-base">
|
||||||
{`$${vaults.usdc?.balance.toLocaleString()}` || 'N/A'}
|
{vaults.usdcBalance}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -360,24 +325,17 @@ const ContributionModal = () => {
|
||||||
<div className="flex items-center justify-center pt-0.5">
|
<div className="flex items-center justify-center pt-0.5">
|
||||||
<img className="h-5 mr-2 w-auto" src="/logo.svg" alt="mango" />
|
<img className="h-5 mr-2 w-auto" src="/logo.svg" alt="mango" />
|
||||||
<div className="font-bold text-fgd-1 text-base">
|
<div className="font-bold text-fgd-1 text-base">
|
||||||
{vaults.mango?.balance.toLocaleString() || 'N/A'}
|
{vaults.mangoBalance}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-b border-bkg-4 py-4 text-center">
|
<div className="border-b border-bkg-4 py-4 text-center">
|
||||||
<p className="text-fgd-3">Deposits Close</p>
|
<p className="text-fgd-3">Deposits Close</p>
|
||||||
{pool ? (
|
<PoolCountdown date={endDeposits} />
|
||||||
<Countdown
|
|
||||||
date={endDeposits?.format()}
|
|
||||||
renderer={renderCountdown}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 text-center">
|
<div className="pt-4 text-center">
|
||||||
<p className="text-fgd-3">Withdrawals Close</p>
|
<p className="text-fgd-3">Withdrawals Close</p>
|
||||||
{pool ? (
|
<PoolCountdown date={endIdo} />
|
||||||
<Countdown date={endIdo?.format()} renderer={renderCountdown} />
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
{/* <p>
|
{/* <p>
|
||||||
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
||||||
|
|
|
@ -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 <p className="text-secondary-2-light">{message}</p>
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div className="font-bold pt-2 text-fgd-1 text-base">
|
||||||
|
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
||||||
|
{hours < 10 ? `0${hours}` : hours}
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
||||||
|
{minutes < 10 ? `0${minutes}` : minutes}
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
<span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
|
||||||
|
{seconds < 10 ? `0${seconds}` : seconds}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.date) {
|
||||||
|
return <Countdown date={props.date.format()} renderer={renderCountdown} />
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PoolCountdown
|
|
@ -0,0 +1,73 @@
|
||||||
|
import usePool from '../hooks/usePool'
|
||||||
|
import useVaults from '../hooks/useVaults'
|
||||||
|
import PoolCountdown from './PoolCountdown'
|
||||||
|
|
||||||
|
const Card = (props: any) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="m-2 p-4 rounded-lg"
|
||||||
|
style={{ backgroundColor: 'rgba(44, 41, 66, 1)' }}
|
||||||
|
>
|
||||||
|
<p className="pb-2">{props.title}</p>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const PoolInfoCards = () => {
|
||||||
|
const { endIdo, endDeposits } = usePool()
|
||||||
|
const vaults = useVaults()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row justify-center mb-12">
|
||||||
|
<Card title="Deposits closing in">
|
||||||
|
<PoolCountdown date={endDeposits} />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title="Sale event ends in">
|
||||||
|
<PoolCountdown date={endIdo} />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title="Total $MNGO for sale">
|
||||||
|
<div className="flex">
|
||||||
|
<img className="h-5 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
|
||||||
|
<div className="font-bold text-fgd-1 text-base">
|
||||||
|
{vaults.mangoBalance}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title="Total contributions">
|
||||||
|
<div className="flex">
|
||||||
|
<img
|
||||||
|
alt="USDC"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src="/icons/usdc.svg"
|
||||||
|
className={`mr-2`}
|
||||||
|
/>{' '}
|
||||||
|
<div className="font-bold text-fgd-1 text-base">
|
||||||
|
{vaults.usdcBalance}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title="Estimated token price">
|
||||||
|
<div className="flex">
|
||||||
|
<img
|
||||||
|
alt="USDC"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src="/icons/usdc.svg"
|
||||||
|
className={`mr-2`}
|
||||||
|
/>{' '}
|
||||||
|
<div className="font-bold text-fgd-1 text-base">
|
||||||
|
{vaults.estimatedPrice.substring(0, 9)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PoolInfoCards
|
|
@ -0,0 +1,13 @@
|
||||||
|
import moment from 'moment'
|
||||||
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
|
|
||||||
|
export default function usePool() {
|
||||||
|
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
|
||||||
|
|
||||||
|
return { pool, startIdo, endIdo, endDeposits }
|
||||||
|
}
|
|
@ -22,5 +22,19 @@ export default function useVaults() {
|
||||||
[mangoVault, mints]
|
[mangoVault, mints]
|
||||||
)
|
)
|
||||||
|
|
||||||
return { usdc, mango }
|
const usdcBalance = useMemo(
|
||||||
|
() => (usdc ? `${Math.round(usdc.balance).toLocaleString()}` : 'N/A'),
|
||||||
|
[usdc]
|
||||||
|
)
|
||||||
|
const mangoBalance = useMemo(
|
||||||
|
() => `${mango?.balance.toLocaleString()}` || 'N/A',
|
||||||
|
[mango]
|
||||||
|
)
|
||||||
|
|
||||||
|
const estimatedPrice = useMemo(
|
||||||
|
() => (usdc && mango ? `$${usdc.balance / mango.balance}` : 'N/A'),
|
||||||
|
[usdc, mango]
|
||||||
|
)
|
||||||
|
|
||||||
|
return { usdc, mango, usdcBalance, mangoBalance, estimatedPrice }
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
import Notifications from '../components/Notification'
|
import Notifications from '../components/Notification'
|
||||||
import TopBar from '../components/TopBar'
|
import TopBar from '../components/TopBar'
|
||||||
import ContributionModal from '../components/ContributionModal'
|
import ContributionModal from '../components/ContributionModal'
|
||||||
|
import PoolInfoCards from '../components/PoolInfoCards'
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||||
<TopBar />
|
<TopBar />
|
||||||
<Notifications />
|
<Notifications />
|
||||||
|
|
||||||
|
<PoolInfoCards />
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
||||||
<ContributionModal />
|
<ContributionModal />
|
||||||
|
|
Loading…
Reference in New Issue