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 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 <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 (
|
||||
<>
|
||||
<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`}
|
||||
/>
|
||||
<div className="font-bold text-fgd-1 text-xl">
|
||||
{vaults.usdc && vaults.mango
|
||||
? `$${vaults.usdc.balance / vaults.mango.balance}`
|
||||
: 'N/A'}
|
||||
{vaults.estimatedPrice}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -351,7 +316,7 @@ const ContributionModal = () => {
|
|||
<p className="text-fgd-3">Total USDC Deposited</p>
|
||||
<div className="flex items-center justify-center pt-0.5">
|
||||
<div className="font-bold text-fgd-1 text-base">
|
||||
{`$${vaults.usdc?.balance.toLocaleString()}` || 'N/A'}
|
||||
{vaults.usdcBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -360,24 +325,17 @@ const ContributionModal = () => {
|
|||
<div className="flex items-center justify-center pt-0.5">
|
||||
<img className="h-5 mr-2 w-auto" src="/logo.svg" alt="mango" />
|
||||
<div className="font-bold text-fgd-1 text-base">
|
||||
{vaults.mango?.balance.toLocaleString() || 'N/A'}
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-b border-bkg-4 py-4 text-center">
|
||||
<p className="text-fgd-3">Deposits Close</p>
|
||||
{pool ? (
|
||||
<Countdown
|
||||
date={endDeposits?.format()}
|
||||
renderer={renderCountdown}
|
||||
/>
|
||||
) : null}
|
||||
<PoolCountdown date={endDeposits} />
|
||||
</div>
|
||||
<div className="pt-4 text-center">
|
||||
<p className="text-fgd-3">Withdrawals Close</p>
|
||||
{pool ? (
|
||||
<Countdown date={endIdo?.format()} renderer={renderCountdown} />
|
||||
) : null}
|
||||
<PoolCountdown date={endIdo} />
|
||||
</div>
|
||||
{/* <p>
|
||||
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]
|
||||
)
|
||||
|
||||
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 TopBar from '../components/TopBar'
|
||||
import ContributionModal from '../components/ContributionModal'
|
||||
import PoolInfoCards from '../components/PoolInfoCards'
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<Notifications />
|
||||
|
||||
<PoolInfoCards />
|
||||
<div className="flex justify-center">
|
||||
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
||||
<ContributionModal />
|
||||
|
|
Loading…
Reference in New Issue