vault stats styling
This commit is contained in:
parent
6fb62ef7e1
commit
976e27c059
|
@ -1,6 +1,4 @@
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import styled from '@emotion/styled'
|
|
||||||
import tw from 'twin.macro'
|
|
||||||
import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
|
import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
|
||||||
import { LinkIcon } from '@heroicons/react/solid'
|
import { LinkIcon } from '@heroicons/react/solid'
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
|
@ -13,33 +11,7 @@ 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 moment from 'moment'
|
||||||
|
import Countdown from 'react-countdown'
|
||||||
const StyledModalWrapper = styled.div`
|
|
||||||
height: 414px;
|
|
||||||
${tw`bg-bkg-2 flex flex-col items-center relative rounded-lg shadow-lg p-7 w-96`}
|
|
||||||
`
|
|
||||||
type StyledModalBorderProps = {
|
|
||||||
animate: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledModalBorder = styled.div<StyledModalBorderProps>`
|
|
||||||
height: 416px;
|
|
||||||
width: 386px;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
z-index: -1;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
:after {
|
|
||||||
content: '';
|
|
||||||
background-size: 300% 300%;
|
|
||||||
${tw`bg-bkg-3 absolute top-0 left-0 right-0 bottom-0 rounded-lg`}
|
|
||||||
|
|
||||||
${({ animate }) =>
|
|
||||||
animate &&
|
|
||||||
tw`animate-gradient opacity-60 bg-gradient-to-br from-secondary-1-light via-secondary-3-light to-primary-light`}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const ContributionModal = () => {
|
const ContributionModal = () => {
|
||||||
const actions = useWalletStore((s) => s.actions)
|
const actions = useWalletStore((s) => s.actions)
|
||||||
|
@ -49,7 +21,7 @@ const ContributionModal = () => {
|
||||||
const vaults = useVaults()
|
const vaults = useVaults()
|
||||||
|
|
||||||
const pool = useWalletStore((s) => s.pool)
|
const pool = useWalletStore((s) => s.pool)
|
||||||
const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
|
// const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
|
||||||
const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
|
const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
|
||||||
const endDeposits = pool
|
const endDeposits = pool
|
||||||
? moment.unix(pool.endDepositsTs.toNumber())
|
? moment.unix(pool.endDepositsTs.toNumber())
|
||||||
|
@ -139,13 +111,40 @@ const ContributionModal = () => {
|
||||||
|
|
||||||
const disableFormInputs = submitted || !connected || loading
|
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 <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="relative z-10">
|
<>
|
||||||
<StyledModalWrapper>
|
<div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
|
||||||
<div className="pb-4 text-center">
|
<div className="pb-4 text-center">
|
||||||
{!submitted && !submitting && !editContribution ? (
|
{!submitted && !submitting && !editContribution ? (
|
||||||
<>
|
<>
|
||||||
<h2>Plant your seed</h2>
|
<h2>Plant Your Seed</h2>
|
||||||
<p>This is the start of something big.</p>
|
<p>This is the start of something big.</p>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -172,7 +171,7 @@ const ContributionModal = () => {
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
{submitting ? (
|
{submitting ? (
|
||||||
<div className="flex items-center h-full">
|
<div className="flex h-64 items-center justify-center">
|
||||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
@ -268,47 +267,93 @@ const ContributionModal = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{connected ? (
|
<div className="flex justify-center">
|
||||||
<Button
|
{connected ? (
|
||||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
<Button
|
||||||
onClick={() => handleConnectDisconnect()}
|
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
||||||
secondary
|
onClick={() => handleConnectDisconnect()}
|
||||||
>
|
secondary
|
||||||
<div className="flex items-center text-sm">
|
>
|
||||||
<LinkIcon className="h-4 w-4 mr-1" />
|
<div className="flex items-center text-sm">
|
||||||
Disconnect
|
<LinkIcon className="h-4 w-4 mr-1" />
|
||||||
</div>
|
Disconnect
|
||||||
</Button>
|
</div>
|
||||||
) : (
|
</Button>
|
||||||
<ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
|
) : (
|
||||||
<div className="flex items-center justify-center text-sm">
|
<ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
|
||||||
<LinkIcon className="h-4 w-4 mr-1" />
|
<div className="flex items-center justify-center text-sm">
|
||||||
Connect Wallet
|
<LinkIcon className="h-4 w-4 mr-1" />
|
||||||
</div>
|
Connect Wallet
|
||||||
</ConnectWalletButtonSmall>
|
</div>
|
||||||
)}
|
</ConnectWalletButtonSmall>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</StyledModalWrapper>
|
</div>
|
||||||
<StyledModalBorder animate={submitted && connected} />
|
<div className="bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 col-span-5 p-7 rounded-lg shadow-lg">
|
||||||
<p>
|
<div className="border-b border-bkg-4 pb-4 text-center">
|
||||||
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
<p className="text-fgd-3">Estimated Token Price</p>
|
||||||
</p>
|
<div className="flex items-center justify-center pt-0.5">
|
||||||
<p>
|
<img
|
||||||
End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
|
alt=""
|
||||||
</p>
|
width="20"
|
||||||
<p>
|
height="20"
|
||||||
End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
|
src="/icons/usdc.svg"
|
||||||
</p>
|
className={`mr-2`}
|
||||||
<p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
|
/>
|
||||||
<p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p>
|
<div className="font-bold text-fgd-1 text-xl">
|
||||||
<p>
|
{vaults.usdc && vaults.mango
|
||||||
Estimated Price per Token:{' '}
|
? `$${vaults.usdc.balance / vaults.mango.balance}`
|
||||||
{vaults.usdc && vaults.mango
|
: 'N/A'}
|
||||||
? vaults.usdc.balance / vaults.mango.balance
|
</div>
|
||||||
: 'N/A'}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="border-b border-bkg-4 py-4 text-center">
|
||||||
|
<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'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="border-b border-bkg-4 py-4 text-center">
|
||||||
|
<p className="text-fgd-3">Locked MNGO in Pool</p>
|
||||||
|
<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'}
|
||||||
|
</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}
|
||||||
|
</div>
|
||||||
|
<div className="pt-4 text-center">
|
||||||
|
<p className="text-fgd-3">Withdrawals Close</p>
|
||||||
|
{pool ? (
|
||||||
|
<Countdown date={endIdo?.format()} renderer={renderCountdown} />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
{/* <p>
|
||||||
|
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
|
||||||
|
</p>
|
||||||
|
<p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
|
||||||
|
<p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
"next-themes": "^0.0.14",
|
"next-themes": "^0.0.14",
|
||||||
"rc-slider": "^9.7.2",
|
"rc-slider": "^9.7.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
|
"react-countdown": "^2.3.2",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"zustand": "^3.4.1"
|
"zustand": "^3.4.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,8 +7,10 @@ const Index = () => {
|
||||||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||||
<TopBar />
|
<TopBar />
|
||||||
<Notifications />
|
<Notifications />
|
||||||
<div className="grid grid-cols-1 place-items-center">
|
<div className="flex justify-center">
|
||||||
<ContributionModal />
|
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
||||||
|
<ContributionModal />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -21,7 +21,7 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@apply text-fgd-4 text-sm;
|
@apply text-fgd-3 text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
|
@ -20,6 +20,7 @@ module.exports = {
|
||||||
'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
|
'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
|
||||||
'secondary-2': { light: '#E54033', dark: '#C7251A' },
|
'secondary-2': { light: '#E54033', dark: '#C7251A' },
|
||||||
'secondary-3': { light: '#026DF7', dark: '#0259CA' },
|
'secondary-3': { light: '#026DF7', dark: '#0259CA' },
|
||||||
|
'secondary-4': { light: '#262145', dark: '#1B1735' },
|
||||||
'bkg-1': '#141125',
|
'bkg-1': '#141125',
|
||||||
'bkg-2': '#242132',
|
'bkg-2': '#242132',
|
||||||
'bkg-3': '#393549',
|
'bkg-3': '#393549',
|
||||||
|
|
|
@ -5273,6 +5273,13 @@ rc-util@^5.0.0, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0:
|
||||||
react-is "^16.12.0"
|
react-is "^16.12.0"
|
||||||
shallowequal "^1.1.0"
|
shallowequal "^1.1.0"
|
||||||
|
|
||||||
|
react-countdown@^2.3.2:
|
||||||
|
version "2.3.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.2.tgz#4cc27f28f2dcd47237ee66e4b9f6d2a21fc0b0ad"
|
||||||
|
integrity sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
react-dom@^17.0.1:
|
react-dom@^17.0.1:
|
||||||
version "17.0.2"
|
version "17.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
|
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
|
||||||
|
|
Loading…
Reference in New Issue